html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    font-family: Arial, sans-serif;
    background-color: #f3f5f9;
}

.custom-background {
    height: 30vh;
    width: 100%;
    background: linear-gradient(to bottom, #172632, #504d4d);
    position: relative;
    transition: background 0.3s;
    padding-top: 150px; /* Espacio para el encabezado */
}

    .custom-background.scrolled {
        background: #F4F5FB;
    }

.header {
    width: 90%;
    position: fixed;
    top: 20px;
    left: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 30px;
    transition: background 0.3s, padding 0.3s, top 0.3s, width 0.3s, border-radius 0.3s;
    z-index: 900;
    left: 2%;
}

    .header.scrolled {
        background: #504d4d;
        top: 20px; /* Mantener el espacio superior al hacer scroll */
        width: 86%;
        height: 45px;
        padding: 10px 30px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 10px;
        left: 8%;
    }

@media (min-width: 1200px) { /* Para pantallas más grandes, como de 24 pulgadas */
    .header.scrolled {
        width: 86%;
        left: 8%;
    }
}

@media (min-width: 1600px) { /* Para pantallas ultrawide */
    .header.scrolled {
        width: 88%;
        left: 7%;
    }
}


        .header.scrolled::before {
            content: "";
            position: absolute;
            top: -20px; /* Mantener el espacio superior */
            left: 0;
            width: 100%;
            height: 20px;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            z-index: -1;
        }

.logo img {
 
    width:110px;
    transition: transform 0.3s;
}

.header.scrolled .logo img {
    transform: scale(0.9);
}

.nav a {
    margin: 0 15px;
    color: #fff;
    text-decoration: none;
    transition: transform 0.3s;
}

.header.scrolled .nav a {
    color: #fff;
    transform: translateX(-10px);
}

.search input {
    padding: 5px 10px;
    border: none;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    transition: background-color 0.3s;
}

.header.scrolled .search input {
    background-color: rgba(255, 255, 255, 0.9);
    color: #000;
}

.icons img {
    height: 24px;
    margin-left: 10px;
    filter: invert(100%);
}

.header.scrolled .icons img {
    filter: invert(100%);
}

.profile img {
    height: 40px;
    border-radius: 50%;
    transition: transform 0.3s;
}

.header.scrolled .profile img {
    transform: scale(0.9);
}



.content {
    padding: 20px;
    background-color: #f3f5f9;
    margin-top: 20px; /* Espacio para que el contenido no esté pegado al header */
}

.containerItrucks {
 
  
    margin-left: 8%;
    margin-right: 2%;
  padding-bottom:30px;
}


.card-container {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
  
    gap: 20px;
}

.card {
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 20px;
    width: 100%;
}

    .card h3 {
        margin: 0;
        font-size: 18px;
    }

    .card p {
        font-size: 16px;
        margin: 10px 0 0;
    }

.section-title {
    font-size: 24px;
    font-weight: bold;
    margin: 20px;
}

 

.rz-sidebar {
    top: 12%;
    border-top-right-radius: 40px;
    display: block; 
}


 
@media (max-width: 1024px) {
    .rz-sidebar {
        display: none;
    }

        .rz-sidebar.mobile-visible {
            display: block;
            width: 80% !important;
        }
}

ul.rz-profile-menu {
   
    background-color: #ffffff00 !important;
 
}



.rz-sidebar.scrolled {
    top: 2.8%;
    border-top-right-radius: 40px;
    z-index: 1000;
    box-shadow: #2e2e2e35 0px 0px 0px 1px;
}
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #2E2E2E;
    opacity: 0.7;
    z-index: 1000;
    display: none;
}

.menu-hover .overlay {
    display: block;
}

.menu-container {
    position: relative;
    z-index: 1000;
}

.navIco {
    display: none;
}

.logoheader{
    margin-left:40%;
}

@media (max-width: 1024px) {
    .navIco {
        display: block;
    }

    .headerClose {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        background-color: #373737 !important; /* Puedes ajustar el color de fondo según tus necesidades */
    }

    .menu-text{
        color:white
    }
    .rz-sidebar.mobile-visible {
        display: block;
        width: 100% !important;
    }

     .close-btn {
        display: block !important;
    }
}
@media (max-width: 768px)
{

    
        
        

    .header {
        width: 95%;
        position: fixed;
        background: transparent;
        display: flex;
        justify-content: space-between;
        transition: background 0.3s, padding 0.3s, top 0.3s, width 0.3s, border-radius 0.3s;
        z-index: 1000;
        padding: 20px 0px !important
    }

    .nav {
        display: none;
    }

    .navIco {
        display: block;
    }

    .header.scrolled {
        background: #504d4d;
        top: 20px; /* Mantener el espacio superior al hacer scroll */
        width: 97%;
        height: 45px;
        padding: 10px 30px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 10px;
        left: 1%;
    }
    .card-container {
        flex-direction: column !important;
        gap: 10px;
    }

    .card {
        width: 100%;
       
    }
    .logoheader {
        margin-left: 0%;
    }
    .containerItrucks {
        margin-left: 3%;
        margin-right: 3%;
    }
    
}

.menu-text {
    font-size: 14px;
   

}
@media (max-width: 768px) {

    .close-btn {
        display: block !important;
    }

    .menu-text {
        font-size: 30px;
        color: #fff;
        line-height: 1;
        font-weight: 600
    }

    .rz-sidebar.mobile-visible {
        display: block;
        top: 0%;
        border-top-right-radius: 0px;
        width: 100% !important;
    }

    .headerClose {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        background-color: #373737 !important; /* Puedes ajustar el color de fondo según tus necesidades */
    }
 }

.close-btn {
    position: static;
    margin-top: 10px;
    width: 50px;
    height: 50px;
    background-color: #002e6d; /* Color de fondo semitransparente */
    border: 1px solid rgba(0,0,0,0.1); /* Borde blanco */
    border-radius: 50%; /* Forma circular */
    cursor: pointer;
    padding: 0;
    margin: 0;
    z-index: 1000;
    display: none;
}

    .close-icon {
        font-size: 30px;
        color: #ffffff;
        line-height: 1;
        font-weight: 600
    }
.headerClose {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #f8f8f8; /* Puedes ajustar el color de fondo según tus necesidades */
}

.custom-containerHome {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    padding-top: 40px;
}

.custom-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    padding-top: 40px;
}

.custom-sidebar {
    width: 300px;
    /* background-color: white; */
    border-radius: 8px;
    /* box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05); */
    position: sticky;
    top: 14%;
    flex-shrink: 0;
    /* border-bottom: 8px solid #002e6d; */
}

/* Media query para pantallas más pequeñas */
@media (max-width: 768px) {
    .custom-sidebar {
        width: 99%;
        position: relative !important; /* Cambia el sticky a relative y fuerza la aplicación con !important */
        top: auto !important; /* Resetea la propiedad top */
    }
}


.custom-card-header {
    background-image: url(../../assets/img/FondoCard.jpg);
    background-size: cover;
    background-position: center center;
    /* height: 55px; */
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    color: white;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    position: relative;
}
.custom-card a {
    text-decoration: none; /* Eliminar el subrayado */
    color: inherit; /* Mantener el color según lo que se hereda del contenedor o aplicarlo aquí si es necesario */
}

    .custom-card a:visited {
        color: black; /* Cambiar el color de los enlaces visitados a negro */
    }

.custom-card-title {
    margin: 0;
    padding: 0;
    text-decoration: none !important;
}

    .custom-card-title span {
        font-size: 20px;
        font-weight: 600;
        text-decoration: none !important;
    }

.custom-card-toolbar {
    position: absolute;
    top: 20px;
    right: 20px;
}

    .custom-card-toolbar .btn-menu {
        background: none;
        border: none;
        color: white;
        cursor: pointer;
        font-size: 18px;
    }

.custom-content {
    padding: 20px;
}

.custom-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.custom-grid-item {
    background-color: #f1f3f7;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    color: #3d4451;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.3s ease;
}

    .custom-grid-item:hover {
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    }

    .custom-grid-item i {
        font-size: 24px;
        color: #504d4d;
        margin-bottom: 5px; 
    }

    .custom-grid-item .custom-amount {
        font-size: 20px;
        font-weight: 600;
        color: #3d4451;
    }

    .custom-grid-item .custom-description {
        font-size: 14px;
        color: #98a6ad;
    }

.custom-main {
    flex: 1;
    margin-left: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.custom-main-cards {
    display: flex;
    gap: 20px;
    text-decoration: none !important;
}

.custom-card {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.05);
    padding: 20px;
    text-align: left;
    flex: 1;
    position: relative;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

    .custom-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

.custom-card-body i {
    font-size: 24px;
    color: rgba(255, 255, 255, 0.8); /* Color inicial visible del ícono */
    transition: all 0.3s ease;
}

.custom-card-icon-circle {
    position: absolute;
    top: -15px;
    right: -10px;
    width: 50px;
    height: 50px;
    background-color: #333;
    border-radius: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
  /*  transform: scaleX(-1);*/
}


.custom-card:hover .custom-card-icon-circle {
    width: 100px; /* Agrandar el círculo al hacer hover */
    height: 100px;
    background-color: rgba(40, 167, 69, 0.7); /* Fondo más oscuro al hacer hover */
   
}

.custom-card:hover .custom-card-body i {
    color: rgba(255, 255, 255, 1); /* Ícono más oscuro al hacer hover */
    font-size: 28px; /* Agrandar el ícono */
}

.custom-amount {
    font-size: 28px;
    font-weight: bold;
    color: #3d4451;
    text-decoration: none;
}

.custom-description {
    font-size: 14px;
    color: #98a6ad;
    text-decoration: none;
}

.custom-card:nth-child(1) .custom-card-icon-circle {
    background-color: rgb(40, 167, 69); /* Más visible por defecto */
}

.custom-card:nth-child(2) .custom-card-icon-circle {
    background-color: rgb(244, 67, 54); /* Más visible por defecto */
}

.custom-card:nth-child(3) .custom-card-icon-circle {
    background-color: rgb(108, 117, 125); /* Más visible por defecto */
}

.custom-card:nth-child(1) {
    border-bottom: 3px solid #28a745;
}

.custom-card:nth-child(2) {
    border-bottom: 3px solid #f44336;
}

.custom-card:nth-child(3) {
    border-bottom: 3px solid #6c757d;
}

/* Responsive */
@media (max-width: 768px) {
    .custom-main-cards {
        flex-direction: column;
      
    }

    .custom-card {
        max-width: 100%;
    }

    .custom-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }
}
@media (max-width: 768px) {
    .custom-containerHome {
        display: flex;
        flex-direction: row; /* En pantallas grandes sigue el orden normal */
        gap: 15px;
    }

    @media (max-width: 768px) {
        .custom-containerHome {
            flex-direction: column-reverse; /* Invertir el orden en pantallas pequeñas */
        }
    }
}

  
.custom-buttons {
    display: flex;
    gap: 10px;
    flex-direction: column;
    align-items: center;
}

.date-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 16px; /* Ajusta según sea necesario */
    padding: 10px;
    background-color: #002e6d; /* Fondo opcional */
    border-radius: 5px; /* Bordes redondeados opcionales */
}

.date-text {
    font-size: 1em; /* Tamaño del texto de la fecha */
    font-weight: bold;
    color: white;
}

.date-label {
    font-size: 12px; /* Tamaño del texto "Fecha Actual" */
    color: white; /* Ajusta el color si es necesario */
}


.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
}

.btn-invite {
    background-color: #2fbf71;
    color: white;
}

.btn-target {
    background-color: #333;
    color: white;
}

.MarginCero {
   
    margin-bottom: 0px !important;
}


/* Estilos del header */
.custom-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

    .custom-header.scrolled h1 {
        font-size: 20px !important; /* Forzar el cambio con !important */
        color: #333 !important; /* Forzar el cambio con !important */
    }



    .custom-header h1  {
        font-size: 24px;
        font-weight: 600;
        color: #fff;
        margin: 0;
    }

    .custom-header p {
        font-size: 14px;
        color: #c4c4c4;
        margin: 5px 0 0;
    }

 

.list-title {
    font-weight: 600;
    color: #333;
    flex-grow: 1;
}

.custom-date-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 8px;
    color: white;
    font-weight: 600;
    font-size: 1rem;
    margin-right: 15px;
}

    .custom-date-badge.green {
        background-color: #378649; /* Verde profesional */
    }

.custom-date-badge.red {
    background-color: #dc3545; /* Rojo profesional */
}

.custom-date-badge.gray {
    background-color: #6c757d; /* Gris profesional */
}








.List-custom-card-list {
    background-color: #ffffff !important; /* Fondo blanco */
    border-radius: 10px !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
    padding: 20px !important;
    margin-top: 20px !important;
    flex-grow: 1 !important;
    color: #333 !important;
    margin-bottom: 20px !important;
    border-bottom: 8px solid #002e6d;
}

    .List-custom-card-list h2 {
        font-size: 1.5rem !important;
        margin-bottom: 15px !important;
        font-weight: 600 !important;
        color: #333 !important;
        text-align: center !important;
    }

    .List-custom-card-list ul {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

        .List-custom-card-list ul li {
            display: flex !important;
            align-items: center !important;
            padding: 15px 0 !important;
            border-bottom: 1px solid #ddd !important;
            transition: background-color 0.3s ease !important;
            justify-content: flex-start !important;
        }

            .List-custom-card-list ul li:last-child {
                border-bottom: none !important;
            }

            .List-custom-card-list ul li:hover {
                background-color: #f9f9f9 !important;
            }

.List-list-title {
    font-weight: 600 !important;
    color: #333 !important;
    flex-grow: 1 !important;
}

.List-date-badge {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 60px !important;
    height: 85px !important;
    border-radius: 8px !important;
    color: white !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    margin-right: 20px !important;
    text-align: center !important;
    padding: 10px !important;
    background-color: #5A5A5A !important; /* Color por defecto si no hay estado específico */
}

    .List-date-badge.List-purple {
        background-color: #6c63ff !important;
    }

    .List-date-badge.List-blue {
        background-color: #002e6d !important;
    }

    .List-date-badge.List-orange {
        background-color: #ff9800 !important;
    }

.List-event-time {
    font-size: 0.9rem !important;
    color: #555 !important;
    margin-top: 5px !important;
}

.List-badge {
    display: inline-block !important;
    padding: 5px 10px !important;
    border-radius: 5px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    margin-top: 5px !important;
}

.List-status-on-time {
    background-color: #28a745 !important; /* Verde para A Tiempo */
    color: white !important;
}

.List-status-delayed {
    background-color: #dc3545 !important; /* Rojo para Retrasado */
    color: white !important;
}

.List-status-maintenance {
    background-color: #002e6d !important; /* Amarillo para Mantenimiento */
    color: black !important;
}

.List-status-canceled {
    background-color: #5A5A5A !important; /* Amarillo para Mantenimiento */
    color: #fff !important;
}

.List-route-info {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

.List-route-observations {
    font-size: 0.8rem !important;
    color: #777 !important;
    /* margin-top: 10px !important; */
    margin: 10px;
}

.List-truck-info {
    display: flex !important;
    flex-direction: column !important;
}

.List-truck-title {
    font-weight: 600 !important;
    color: #333 !important;
}

.List-truck-status {
    font-size: 0.9rem !important;
    color: #555 !important;
    margin-top: 5px !important;
}

.List-truck-last-check {
    font-size: 0.8rem !important;
    color: #777 !important;
    margin-top: 5px !important;
}


.Itrucks-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: row;
    margin-bottom: 10px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 10px;
    background-color: #f9f9f9;
    transition: background-color 0.3s ease;
}

.Itrucks-details {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.Itrucks-title {
    font-weight: 600;
    color: #333;
}

.Itrucks-status {
    font-size: 0.9rem;
    color: #555;
    margin-top: 5px;
}

.Itrucks-extra-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 150px;
}

.Itrucks-badge {
    font-size: 0.8rem;
    margin-bottom: 5px;
    color: #fff;
    padding: 3px 6px;
    border-radius: 3px;
}

.Itrucks-status-on-time {
    background-color: #28a745; /* Green */
}

.Itrucks-status-maintenance {
    background-color: #002e6d; /* Yellow */
}

.Itrucks-status-available {
    background-color: #002e6d; /* Blue */
}

.Itrucks-status-delayed {
    background-color: #dc3545; /* Red */
}

.Itrucks-status-inactive {
    background-color: #6c757d; /* Gray */
}

.Itrucks-status-full {
    background-color: #17a2b8; /* Cyan */
}

.Itrucks-last-check {
    font-size: 0.8rem;
    color: #777;
}

.Itrucks-custom-card-list {
    background-color: #ffffff !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
    padding: 20px !important;
    margin-top: 20px !important;
    flex-grow: 1 !important;
    color: #333 !important;
    margin-bottom: 20px !important;
    border-bottom: 8px solid #002e6d;
}

    .Itrucks-custom-card-list h2 {
        text-align: center;
        margin-bottom: 20px;
    }

.Itrucks-list ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.Itrucks-list li {
    margin-bottom: 10px;
}
.ItruCard {
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    background-color: white;
    border-bottom: 8px solid #002e6d;
 
}



.license-list {
    width: 100%;
    margin-top: 20px;
}
@media (max-width: 768px) {
    .cardFormu {
        grid-template-columns: 1fr !important;
        gap: 10px !important; 
    }
}
.FontCard {
    margin: 0;
    font-size: 1.5em; /* Tamaño de fuente para pantallas grandes (PC) */
    font-weight: 600;
    font-family: 'Poppins', sans-serif; /* Aplicar la fuente Poppins */
}

.FontCardV3 {
    margin: 0;
 
    font-family: 'Poppins', sans-serif; /* Aplicar la fuente Poppins */
}

@media (max-width: 768px) {
    .FontCard {
        font-size: 1.0em; /* Tamaño de fuente para pantallas pequeñas (teléfonos) */
    }
}

.FontCardv2 {
    margin: 0;
    font-size: 0.6em; /* Tamaño de fuente para pantallas grandes (PC) */
    font-weight: 900;
    font-family: 'Poppins', sans-serif; /* Aplicar la fuente Poppins */
}

@media (max-width: 768px) {
    .FontCardv2 {
        font-size: 1.0em; /* Tamaño de fuente para pantallas pequeñas (teléfonos) */
    }
}

.cardFormu {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Por defecto 2 columnas */
    gap: 20px;
    margin-top: 20px;
}

/* Grupo normal de 2 elementos */
.row-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    width: 100%;
}

    /* Grupo especial para 3 elementos */
    .row-group.row-3 {
        grid-template-columns: repeat(3, 1fr);
    }

.button-containerV2 {
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: flex-end; /* Lo lleva al final del contenedor */
    margin-top: 20px;
    width: 100%; /* Asegura que ocupe todo el ancho */
}



.cardFormuModal {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
    margin-top: 20px;
    width: 100%;
}

.license-header {
    display: flex;
    justify-content: space-between;
    padding: 15px 20px;
    background-color: #504D4D;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9em;
    border-radius: 8px 8px 0 0;
    font-family: 'Poppins', sans-serif;
}

.header-item {
    flex: 1;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Poppins', sans-serif;
}

.license-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #ddd;
    transition: background-color 0.3s ease;
    color: #343a40;
}

    .license-item:nth-child(even) {
        background-color: #f8f9fa;
    }

    .license-item:hover {
        background-color: #e9ecef;
    }

.license-type, .license-key, .license-expiry, .license-status {
    flex: 1;
    text-align: left;
}

.license-status {
    font-weight: bold;
}
.loading-spinner-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    color: #363535;
    padding-top: 40px
}

.spinner {
    border: 4px solid #f3f3f3; /* Light grey */
    border-top: 4px solid #363535; /* Green */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin-bottom: 10px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


.rz-panel-menu .rz-navigation-item-active, .rz-panel-menu .rz-navigation-item-wrapper-active {
    color: #000000 !important;
    font-weight: 600 !important;
}

/* styles.css */
/* General Styles for Larger Screens */
.ItLicen-container {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.ItLicen-pricing-table {
    /* display: table; */
    width: 100%;
    /* border-collapse: collapse; */
    background-color: #ffffff;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

.ItLicen-header-row {
    display: table-row;
    background-color: #002e6d;
    color: white;
    text-align: center;
    font-weight: bold;
}

.ItLicen-header-cell {
    padding: 15px;
    display: table-cell;
    border-right: 1px solid #ddd;
    border-radius: 8px;
}

.ItLicen-description-row {
    display: table-row;
    background-color: #f8f9fa;
    color: #333;
    text-align: center;
}

.ItLicen-description-cell {
    padding: 10px 15px;
    display: table-cell;
    font-size: 0.9em;
    border-right: 1px solid #ddd;
}

    .ItLicen-description-cell:last-child {
        border-right: none;
    }

.ItLicen-feature-row {
    display: table-row;
}

.ItLicen-feature-title {
    background-color: #f8f9fa;
    font-weight: bold;
    text-align: left;
    padding: 15px;
    display: table-cell;
    border-right: 1px solid #ddd;
    color: #333;
    display: flex;
    align-items: center;
}

    .ItLicen-feature-title i {
        margin-right: 8px;
    }

.ItLicen-feature-cell {
    padding: 15px;
    display: table-cell;
    text-align: center;
    border-right: 1px solid #ddd;
}

    .ItLicen-feature-cell:last-child,
    .ItLicen-header-cell:last-child {
        border-right: none;
    }

.ItLicen-feature-row:nth-child(even) {
    background-color: #f9f9f9;
}

.ItLicen-current-license {
    border-left: 4px solid #002e6d;
    border-right: 4px solid #002e6d;
    background-color: #fff8e1;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.ItLicen-current-Stard {
    /* color: black; */
    font-weight: 600;
    /* border-top: 15px solid #002e6d; */
    background-color: #363535;
    color: white;
   
}

.ItLicen-current-End {
    border-bottom: 15px solid #002e6d;
}

.ItLicen-button-row {
    text-align: center;
    padding: 20px;
}

.ItLicen-button-cell {
    padding: 20px;
}

.ItLicen-button {
    display: inline-block;
    background-color: #002e6d;
    color: white;
    padding: 11px 25px;
    font-size: 18px;
    cursor: pointer;
    border-radius: 5px;
    text-decoration: none;
    border: none;
    box-shadow: none;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

    .ItLicen-button:hover {
        background-color: #e7bb08;
    }

/* Badge Style */
    .badgeLice {
    background-color: red;
    color: white;
    padding: 3px 12px;
    border-radius: 0 10px 10px 0;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    position: relative;
    display: inline-block;
    width: fit-content;
    transition: background-color 0.3s ease;
    margin-left: 25px;
}

    .badgeLice::before {
        content: "";
        position: absolute;
        left: -10px;
        top: 0;
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-right: 10px solid red;
    }

/* Responsive Styles */
@media (max-width: 768px) {
    /* Hide the table layout for mobile */
    .ItLicen-pricing-table {
        display: none;
    }

    /* Display the mobile-friendly cards */
    .ItLicen-mobile-cards {
        display: block;
        width: 100%;
    }

    .ItLicen-plan-card {
        margin-bottom: 20px;
        background-color: #ffffff;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        overflow: hidden;
        border: 2px solid #ddd;
    }

    .ItLicen-plan-header {
        background-color: #002e6d;
        color: white;
        text-align: center;
        font-weight: bold;
        padding: 15px;
        position: relative;
    }

        .ItLicen-plan-header.ItLicen-current-license {
            background-color: #363535;
            color: white;
        }

    .badgeLice {
        position: absolute;
        top: 10px;
        right: 10px;
    }

    .ItLicen-plan-content {
        padding: 15px;
    }

    .ItLicen-plan-feature {
        margin-bottom: 10px;
    }

    .ItLicen-plan-feature-title {
        font-weight: bold;
        margin-bottom: 5px;
    }

    .ItLicen-button-cell {
        text-align: center;
        padding: 20px;
    }
}

/* Hide mobile-friendly cards on larger screens */
@media (min-width: 769px) {
    .ItLicen-mobile-cards {
        display: none;
    }
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #2E2E2E;
    opacity: 0.7;
    z-index: 1000;
    display: none;
}

.menu-hover .overlay {
    display: block;
}

.menu-container {
    position: relative;
    z-index: 1000;
}


.rz-year-view .rz-slot .rz-slot-title.rz-has-appointments {
    color: var(--rz-scheduler-event-color);
    background-color: #CABD3E;
}

.rz-form-fieldModal {
   
    PADDING-TOP: 15PX !important;
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* 2 columnas en pantallas grandes */
    gap: 20px; /* Espacio entre las columnas */
}

.List-dashboard-containerDriver {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
    width: 100%; /* Asegura que el contenedor ocupe el ancho completo */
}

.List-dashboard-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    width: 100%; /* Asegura que el contenedor ocupe el ancho completo */
}

@media (max-width: 1024px) {
    .date-text {
        font-size: 1em;
    }

    .List-dashboard-container {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 10px; 
    }
}

@media (max-width: 768px) {

    .date-text {
        font-size: 1em;  
         
    }
    .List-dashboard-container {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 10px;
    }
}

.cardHomeIzquieda {
    margin-bottom: 15px;
    border-radius: 8px;
    background-color: white;
    border-bottom: 8px solid #002e6d;
}

.no-data {
    color: #a0a0a0; /* Color gris suave */
    font-size: 1em;
    text-align: center;
   
    padding: 1rem;
    border: 1px dashed #ccc; /* Añadir borde sutil */
    border-radius: 8px; /* Bordes redondeados */
    background-color: #f9f9f9; /* Fondo suave */
}

  

.create-task-link {
    display: inline-block;
    background-color: transparent; /* Color de fondo del botón */
    color: #002e6d; /* Color del texto */
   
    text-decoration: solid; /* Eliminar subrayado */
    
}


.no-data i {
    display: block; /* Asegura que el icono esté en una nueva línea */
    margin-top: 1rem; /* Espacio entre el icono y el texto */
    font-size: 2rem; /* Tamaño del ícono */
    opacity: 0.5; /* Transparencia del ícono */
    color: #a0a0a0; /* Color del ícono para que sea coherente con el resto */
    transition: opacity 0.3s ease, transform 0.3s ease;
}

    .no-data i:hover {
        opacity: 0.8; /* Menos transparencia al pasar el mouse */
        transform: scale(1.1); /* Agranda un poco el icono en hover */
    }



.rz-dialog-titlebar, .rz-dialog-side-titlebar {
    BACKGROUND: #002e6d;
}

.rz-dialog-title, .rz-dialog-side-title {
    color: white !important;
    margin-bottom: 20px;
}

.rz-dialog-titlebar-close {
    margin-bottom: 20px;
    cursor: pointer;
}

.rz-dialog-mask {
    opacity: 0.7;
}

.rz-dialog-titlebar-close .rzi-times, .rz-dialog-side-titlebar-close .rzi-times {
    font-size: var(--rz-dialog-close-font-size);
    color: white;
    font-weight: 900;
    vertical-align: var(--rz-dialog-close-vertical-align);
}

.BtnItruck {
    background: #3E3936 !important;
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
    border-radius: 9px;
}

.text-gray {
    color: gray;
}

.rz-dialog-content, .rz-dialog-side-content {
    padding-top: 1px;
    padding-bottom: 30px
}

.rz-form-field-helper {
    padding: var(--rz-form-field-helper-padding);
    z-index: 2 !important;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* Estilos por defecto (PC) */
.containerCel {
    padding-top: 20%;
}

.LogoTelefono {
    display: block;
    margin: 0 auto;
}

/* Media query para teléfonos */
@media only screen and (max-width: 768px) {
    .containerCel {
        padding-top: 10%;
    }

    .LogoTelefono {
        text-align: center;
    }
}



.backgroundCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
}


.TextWhite {
    color: #ffffff !important
}

.TextGre {
    color: #373737 !important
}


.custom-notification-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1040;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-notification {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
    max-width: 400px;
    text-align: center;
    position: relative;
}

    .custom-notification h2 {
        color: #002e6d;
    }

    .custom-notification span {
        background-color: #f0f0f0;
        padding: 5px;
        border-radius: 5px;
    }

    .custom-notification button {
        margin-top: 20px;
        padding: 10px 20px;
        background-color: #002e6d;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }

.progress-bar {
    width: 100%;
    height: 5px;
    background-color: #e0e0e0;
    border-radius: 5px;
    overflow: hidden;
    margin-top: 15px;
}

.progress-fill {
    height: 100%;
    background-color: #002e6d;
    transition: width 0.1s linear;
}


.header-info {
    display: flex;
    justify-content: center; /* Centrar el contenido horizontalmente */
    align-items: center; /* Centrar el contenido verticalmente */
    background-color: #2C2C2C; /* Fondo oscuro */
    padding: 10px 20px;
    border-radius: 15px;
}

@media only screen and (max-width: 768px) {
    .header-info {
        display: none !important;
    }
}

.header-info a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
    margin: 0 15px; /* Espacio entre los elementos */
    display: inline-flex;
    align-items: center;
}

    .header-info a:first-child {
        border-right: 2px solid #555; /* Línea divisoria entre los elementos */
        padding-right: 15px;
        margin-right: 15px;
    }

    .header-info a:last-child {
        padding: 5px 10px;
        background-color: #FFD700; /* Color dorado para destacar */
        border-radius: 15px; /* Borde redondeado */
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Sombra para dar profundidad */
    }

        .header-info a:last-child:hover {
            background-color: #002e6d; /* Color más oscuro al pasar el mouse */
            box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.15);
            transition: background-color 0.3s ease, box-shadow 0.3s ease;
        }

.header-info {
    display: flex;
    justify-content: center; /* Centrar el contenido horizontalmente */
    align-items: center; /* Centrar el contenido verticalmente */
    background-color: #2C2C2C; /* Fondo oscuro */
    padding: 10px 20px;
    border-radius: 15px;
}

    .header-info a {
        color: white;
        text-decoration: none;
        font-weight: bold;
        font-size: 1rem;
        margin: 0 15px; /* Espacio entre los elementos */
        display: inline-flex;
        align-items: center;
    }

        .header-info a:first-child {
            border-right: 2px solid #555; /* Línea divisoria entre los elementos */
            padding-right: 15px;
            margin-right: 15px;
        }

.license {
    padding: 5px 10px;
    border-radius: 15px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    font-weight: bold;
}

.license-profesional {
    background-color: #4A90E2 !important; /* Azul más suave para Academic */
    color: #FFFFFF !important; /* Blanco */
}

.license-essential {
    background-color: #7B8E98 !important; /* Gris azulado para Basic */
    color: #FFFFFF !important; /* Blanco */
}

.license-enterprise {
    background-color: #34A853 !important; /* Verde vibrante para Enterprise */
    color: #FFFFFF !important; /* Blanco */
}

.license-free {
    background-color: #00BFA5 !important; /* Verde agua para Free */
    color: #FFFFFF !important; /* Blanco */
}

.license-premium {
    background-color: #002e6d !important; /* Dorado más suave para Premium */
    color: #2C2C2C !important; /* Oscuro para contraste */
}

.license-pro {
    background-color: #E53935 !important; /* Rojo vivo para Pro */
    color: #FFFFFF !important; /* Blanco */
}

.license-trial {
    background-color: #002e6d !important; /* Naranja suave para Trial */
    color: white !important; /* Oscuro para contraste */
}

.license-default {
    background-color: #495057 !important; /* Gris oscuro pero no completamente negro */
    color: #FFFFFF !important; /* Blanco */
}


.rz-tooltip-content {
    background-color: #d41355;
    color: var(--rz-text-contrast-color);
}

.rz-panel-menu .rz-navigation-item-active .rz-navigation-item-icon, .rz-panel-menu .rz-navigation-item-wrapper-active .rz-navigation-item-icon {
    color: #333333;
}

.rz-panel-menu .rz-navigation-item-active, .rz-panel-menu .rz-navigation-item-wrapper-active {
    background-color: #002e6d59;
}


.rz-alert .rz-alert-title {
    color: #ffffff;
}

.rz-alert.rz-warning.rz-shade-lighter {
    --rz-alert-background-color: rgb(200 184 81);
    --rz-alert-color: #ffffff;
    --rz-alert-title-color: #ffffff;
    --rz-alert-icon-color: #ffffff;
}

.rz-button.rz-variant-text.rz-warning:not(.rz-state-disabled):hover:not(:active), .rz-button.rz-variant-text.rz-warning:not(.rz-state-disabled):focus-visible:not(:active), .rz-button.rz-variant-text.rz-warning:not(.rz-state-disabled):active {
    background-color: rgb(255 255 255 / 20%);
    color: #ffffff;
    background-image: none;
    box-shadow: none;
}

.rz-button.rz-variant-text.rz-warning.rz-shade-darker {
    color: #ffffff;
}

.rz-alert.rz-info.rz-shade-lighter {
    --rz-alert-background-color: rgb(251 253 255 / 20%);
    --rz-alert-color: #ffffff;
    --rz-alert-title-color: #ffffff;
    --rz-alert-icon-color: #ffffff;
}

.rz-button.rz-variant-text.rz-info.rz-shade-darker {
    color: #ffffff;
}

/* Ocultar en teléfonos (pantallas menores o iguales a 767px) */
@media only screen and (max-width: 767px) {
    .ocultar-en-telefono {
        display: none;
    }

    .custom-header {
        flex-direction: column;
    }

    .custom-buttons {
        padding-top: 20px
    }

    .custom-main-cards {
        display: block;
    }

    .custom-main-cards {
        align-items: normal;
    }

    .custom-main {
        margin-left: 0px !important;
    }

    .custom-container {
        grid-template-columns: repeat(1, 1fr) !important; /* 1 columna en pantallas pequeñas */
        padding-top: 20px; /* Ajuste del padding para pantallas pequeñas */
    }

    .List-dashboard-container {
        gap: 0px !important;
    }
}

.mobile-header-info {
    display: none;
    justify-content: center; /* Centrar el contenido horizontalmente */
    align-items: center; /* Centrar el contenido verticalmente */
    background-color: #373737; /* Fondo oscuro */
    padding: 10px 20px;
}

@media only screen and (max-width: 768px) {
    .mobile-header-info {
        display: flex !important;
    }
}

.mobile-header-info a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
    margin: 0 15px; /* Espacio entre los elementos */
    display: inline-flex;
    align-items: center;
}

    .mobile-header-info a:first-child {
        border-right: 2px solid #555; /* Línea divisoria entre los elementos */
        padding-right: 15px;
        margin-right: 15px;
    }

    .mobile-header-info a:last-child {
        padding: 5px 10px;
        background-color: #FFD700; /* Color dorado para destacar */
        border-radius: 15px; /* Borde redondeado */
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Sombra para dar profundidad */
    }

        .mobile-header-info a:last-child:hover {
            background-color: #002e6d; /* Color más oscuro al pasar el mouse */
            box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.15);
            transition: background-color 0.3s ease, box-shadow 0.3s ease;
        }

.license-cards-container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.license-card {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    max-width: 48%;
}

.license-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.license-info {
    display: flex;
    align-items: center;
    font-size: 0.9em;
    color: #333;
}

    .license-info i {
        margin-right: 10px;
        color: #002e6d;
    }

    .license-info span {
        font-size: 0.9em;
    }



.animated-text {
    display: inline-block;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

.rz-button.rz-info.rz-shade-darker:hover {
    background-color: #E53935;
}

.ItLicen-price-carousel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    position: relative;
    overflow: hidden; /* Ensure content outside the container is hidden */
}

.ItLicen-price-content {
    text-align: center;
    flex-grow: 1;
    overflow: hidden; /* Hide overflow content to keep only active slide visible */
}

.ItLicen-price-slider {
    display: flex;
    transition: transform 0.5s ease-in-out; /* Smooth transition for slide effect */
}

.ItLicen-price-slide {
    min-width: 100%; /* Each slide takes full width of the container */
    box-sizing: border-box;
}

.ItLicen-price {
    font-size: 1.5em;
    margin-bottom: 5px;
}

.ItLicen-discount {
    color: green;
    font-weight: bold;
}



.ItLicen-carousel-control.prev {
    position: absolute;
    left: 0;
}

.ItLicen-carousel-control.next {
    position: absolute;
    right: 0;
}

.ItLicen-carousel-control:hover {
    color: #495057;
}


.ItLicen-carousel-control {
    background: none;
    border: none;
    font-size: 3em;
    cursor: pointer;
    color: #333;
    padding: 0 10px;
    font-weight: 900;
    z-index: 10; /* Ensure buttons are on top */
}


/* Estilos específicos para pantallas pequeñas (teléfonos) */
@media (max-width: 768px) {
    .ItLicen-price-carousel {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        max-width: 100%; /* Asegura que el carrusel ocupe todo el ancho en teléfonos */
        margin: 0 auto;
        position: relative;
        overflow: hidden;
    }

    .ItLicen-price-content {
        text-align: center;
        flex-grow: 1;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .ItLicen-price-slider {
        display: flex;
        transition: transform 0.5s ease-in-out;
    }

    .ItLicen-price-slide {
        min-width: 100%;
        box-sizing: border-box;
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: center; /* Centrar el contenido horizontalmente */
        justify-content: center; /* Centrar el contenido verticalmente */
    }

    .ItLicen-plan-feature {
        text-align: center; /* Centrar el texto dentro del plan */
    }

    .ItLicen-plan-feature-title {
        font-weight: bold;
        margin-bottom: 5px; /* Espacio entre el título y el precio */
    }

    .ItLicen-discount {
        margin-top: 10px; /* Espacio por encima del descuento */
        color: green;
        font-weight: bold;
        font-size: 1.2em; /* Aumentar un poco el tamaño del texto */
    }

    .ItLicen-carousel-control {
        background: none;
        border: none;
        font-size: 2.5em; /* Ajuste del tamaño del botón en móviles */
        cursor: pointer;
        color: #333;
        padding: 0 10px;
        font-weight: 900;
        z-index: 10;
    }

        .ItLicen-carousel-control.prev {
            position: absolute;
            left: 0;
        }

        .ItLicen-carousel-control.next {
            position: absolute;
            right: 0;
        }

        .ItLicen-carousel-control:hover {
            color: #495057;
        }
}

@media (max-width: 768px) {
    .license-card-container {
        display: flex !important;
        flex-direction: column; /* Cambia la dirección del flujo para que las tarjetas estén una debajo de otra */
        align-items: center; /* Opcional: centrar las tarjetas en el contenedor */
    }

    .license-card {
        max-width: 90%; /* Ajustar el ancho de la tarjeta para que no ocupe todo el ancho de la pantalla */
        margin-bottom: 15px; /* Espacio entre las tarjetas */
    }

    .license-cards-container {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        flex-direction: column;
    }
}

.license-key {
    font-size: 1.2em; /* Ajustar el tamaño de la fuente según sea necesario */
    letter-spacing: 0.1em; /* Espaciado entre caracteres */
}

.masked-part {
    font-weight: bold; /* Negrita para destacar */
    font-size: 1.8em !important; /* Tamaño más grande para los asteriscos */
    line-height: 1 !important; /* Asegurar que no haya espacio extra */
    vertical-align: middle !important; /* Alinear verticalmente los asteriscos con el texto circundante */
    letter-spacing: -0.05em !important; /* Ajustar el espaciado para los asteriscos */
}

.rz-datatable-thead th, .rz-grid-table thead th {
    background-color: #172632;
    color: white !important;
}

    .rz-datatable-thead th .rz-column-title-content, .rz-grid-table thead th .rz-column-title-content {
        font-weight: 550;
        color: whitesmoke;
    }

.rz-pager-element, .rz-button {
    box-shadow: none;
}

.rz-datatable {
    border-radius: 10px;
}

.rz-pager-page.rz-state-active {
    background-color: #002e6d;
    color: #ffffff !important;
}




.billing-section, .shipping-section {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 20px;
    background-color: #f9f9f9;
}

    .billing-section h4, .shipping-section h4 {
        margin-bottom: 10px;
        color: #002e6d;
    }



.rz-notification-warn .rz-notification-item {
    color: #000000;
    background-color: #FFEB3B;
}

.rz-notification-icon.rzi-exclamation-triangle {
    color: #675d4e;
    font-size: 40px;
}

.rz-notification-success .rz-notification-item {
    background-color: #00bf67;
    color: #ffffff;
}



.rz-notification-close {
    color: #050505;
    font-size: 20px
}

.rz-notification-icon.rzi-check {
    color: #ffffff;
    font-size: 40px;
}

.rz-notification-icon::after {
    content: '';
    display: inline-block;
    width: 1px; /* Grosor de la línea */
    height: 100%; /* Asegúrate de que cubra la altura del contenedor */
    background-color: rgb(251 253 255 / 20%); /* Color de la línea */
    margin-left: 3px;
    ; /* Espacio a la izquierda del icono */
}

.rz-notification-icon.rzi-check:before {
    content: "check_circle";
}

.rz-notification-icon.rzi-times:before {
    content: "chat_error";
}

.rz-notification-error .rz-notification-item {
    color: #ffffff;
    background-color: #F44336;
    border-radius: 10px;
}

.rz-notification-item-wrapper {
    background-color: #f4433600;
}

.rz-notification-icon.rzi-times {
    color: white;
    font-size: 40px;
}

.rz-notification-info .rz-notification-item {
    color: white;
    background-color: #645f5f;
}

.rz-notification-icon.rzi-info-circle {
    color: white;
    font-size: 40px;
}

.rz-notification-item-wrapper {
    width: 100%;
}

.rz-button.rz-base.rz-shade-default {
    background-color: #7a7777;
    color: white;
}

/* CSS personalizado para los botones */
.ItruckCardButtonCopy {
    background-color: #00bf67; /* Color verde */
    border: none;
    color: white;
    padding: 12px 24px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 8px; /* Bordes redondeados */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Efecto al pasar el mouse */
}

    .ItruckCardButtonCopy:hover {
        background-color: #45a049; /* Color verde más oscuro al pasar el mouse */
        transform: scale(1.05); /* Efecto de agrandar ligeramente al pasar el mouse */
    }

    .ItruckCardButtonCopy i {
        margin-right: 8px; /* Espacio entre el icono y el texto */
    }

    .ItruckCardButtonCopy.centered {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 100%;
    }




.ItruckCardButton {
    background-color: #002e6d;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    margin: 4px 2px;
    gap: 8px;
    transition: background-color 0.3s ease, transform 0.3s ease;
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
}



    .ItruckCardButton:hover {
        background-color: #45a049; /* Color verde más oscuro al pasar el mouse */
        transform: scale(1.05); /* Efecto de agrandar ligeramente al pasar el mouse */
    }

    .ItruckCardButton i {
        transition: transform 0.3s ease;
        font-size: 1.25rem; /* Ajustar tamaño con unidades relativas */
    }

    .ItruckCardButton:hover i {
        transform: scaleX(-1); /* Voltea el icono horizontalmente */
    }



.ItruckCardButtonBack {
    background-color: #172632; /* Un color diferente, por ejemplo, naranja */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

    .ItruckCardButtonBack i {
        transition: transform 0.3s ease;
        font-size: 15px;
    }


    .ItruckCardButtonBack:hover i {
        transform: rotate(360deg);
    }

.ItruckCardButtonTemplate {
    background-color: #a860d4; /* Color de fondo verde */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    transition: background-color 0.3s ease;
}

.ItruckCardButtonPreview {
    background-color: #002e6d; /* Color de fondo verde */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    transition: background-color 0.3s ease;
}

    .ItruckCardButtonPreview i {
        font-size: 15px;
        display: inline-block; /* Asegura que el icono se comporta como un elemento en línea-bloque */
    }

    .ItruckCardButtonPreview:hover i {
        animation: bounce 0.5s ease infinite alternate; /* Anima el ícono con un "salto" continuo */
    }

/* Definición de la animación */
@keyframes bounce {
    0% {
        transform: translateY(0); /* Posición inicial */
    }

    50% {
        transform: translateY(-5px); /* Salto hacia arriba */
    }

    100% {
        transform: translateY(0); /* Vuelve a la posición inicial */
    }
}



/* buton list*/



.round-buttonSintxt {
    width: 40px;
    height: 40px;
    border-radius: 30%;
    border: 2px solid #002e6d;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s, color 0.3s, width 0.3s, border-radius 0.3s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

    .round-buttonSintxt i {
        font-size: 18px;
        transition: transform 0.3s;
        color: #002e6d; /* Color del icono por defecto */
        z-index: 1;
    }


.round-buttonTwo {
    width: 40px;
    height: 40px;
    border-radius: 30%;
    border: 2px solid #002e6d;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s, color 0.3s, width 0.3s, border-radius 0.3s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

    .round-buttonTwo i {
        font-size: 18px;
        transition: transform 0.3s;
        color: #002e6d; /* Color del icono por defecto */
        z-index: 1;
    }

    .round-buttonTwo:hover {
        width: 100px; /* Expande el botón en hover */
        border-radius: 15px; /* Cambia a forma rectangular */
        background-color: #f8f9fa;
        justify-content: flex-start; /* Alinea el contenido a la izquierda para que el texto aparezca junto al icono */
        padding-left: 10px; /* Agrega espacio a la izquierda para alinear el icono y el texto */
    }

        .round-buttonTwo:hover i {
            color: #002e6d; /* Asegura que el icono sea blanco en hover */
            transform: translateX(0); /* Ajusta la posición del icono para que esté junto al texto */
        }

    .round-buttonTwo span {
        opacity: 0;
        transition: opacity 0.3s, transform 0.3s;
        position: absolute;
        left: 35px; /* Alinea el texto más cerca del icono */
        color: #555; /* Asegura que el texto sea visible en hover */
    }

    .round-buttonTwo:hover span {
        opacity: 1;
        transform: translateX(0);
    }



.round-buttonTree {
    width: 40px;
    height: 40px;
    border-radius: 30%;
    border: 2px solid #002e6d;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s, color 0.3s, width 0.3s, border-radius 0.3s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

    .round-buttonTree i {
        font-size: 18px;
        transition: transform 0.3s;
        color: #002e6d; /* Color del icono por defecto */
        z-index: 1;
    }

    .round-buttonTree:hover {
        width: 200px; /* Expande el botón en hover */
        border-radius: 15px; /* Cambia a forma rectangular */
        background-color: #002e6d;
        justify-content: flex-start; /* Alinea el contenido a la izquierda para que el texto aparezca junto al icono */
        padding-left: 10px; /* Agrega espacio a la izquierda para alinear el icono y el texto */
    }

        .round-buttonTree:hover i {
            color: white; /* Asegura que el icono sea blanco en hover */
            transform: translateX(0); /* Ajusta la posición del icono para que esté junto al texto */
        }

    .round-buttonTree span {
        opacity: 0;
        transition: opacity 0.3s, transform 0.3s;
        position: absolute;
        left: 35px; /* Alinea el texto más cerca del icono */
        color: white; /* Asegura que el texto sea visible en hover */
    }

    .round-buttonTree:hover span {
        opacity: 1;
        transform: translateX(0);
    }

/**/
.round-button {
    width: 40px;
    height: 40px;
    border-radius: 30%;
    border: 2px solid #002e6d;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s, color 0.3s, width 0.3s, border-radius 0.3s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

    .round-button i {
        font-size: 18px;
        transition: transform 0.3s;
        color: #002e6d; /* Color del icono por defecto */
        z-index: 1;
    }

    .round-button:hover {
        width: 1500px; /* Expande el botón en hover */
        border-radius: 15px; /* Cambia a forma rectangular */
        background-color: #002e6d;
        justify-content: flex-start; /* Alinea el contenido a la izquierda para que el texto aparezca junto al icono */
        padding-left: 10px; /* Agrega espacio a la izquierda para alinear el icono y el texto */
    }

        .round-button:hover i {
            color: white; /* Asegura que el icono sea blanco en hover */
            transform: translateX(0); /* Ajusta la posición del icono para que esté junto al texto */
        }

    .round-button span {
        opacity: 0;
        transition: opacity 0.3s, transform 0.3s;
        position: absolute;
        left: 35px; /* Alinea el texto más cerca del icono */
        color: white; /* Asegura que el texto sea visible en hover */
    }

    .round-button:hover span {
        opacity: 1;
        transform: translateX(0);
    }

.round-button-danger {
    border-color: #dc3545;
}

    .round-button-danger i {
        color: #dc3545; /* Color del icono para el botón de eliminar */
    }

    .round-button-danger:hover {
        background-color: #dc3545;
    }

        .round-button-danger:hover i {
            color: white; /* Asegura que el icono sea blanco en hover */
        }


/*rutas*/

.round-button-Rutas {
    border-color: #dca904;
}

    .round-button-Rutas i {
        color: #dca904; /* Color del icono para el botón de eliminar */
    }

    .round-button-Rutas:hover {
        background-color: #dca904;
    }

        .round-button-Rutas:hover i {
            color: white; /* Asegura que el icono sea blanco en hover */
        }

.round-button-Factura {
    border-color: #002e6d;
}

    .round-button-Factura i {
        color: #002e6d; /* Color del icono para el botón de eliminar */
    }

    .round-button-Factura:hover {
        background-color: #002e6d;
    }

        .round-button-Factura:hover i {
            color: white; /* Asegura que el icono sea blanco en hover */
        }

.round-button-Baja {
    border-color: #6c757d;
}

    .round-button-Baja i {
        color: #6c757d;
    }

    .round-button-Baja:hover {
        background-color: #6c757d;
    }

        .round-button-Baja:hover i {
            color: white;
        }

.round-button-NoVisto {
    border-color: #002e6d;
}

    .round-button-NoVisto i {
        color: #002e6d; /* Color del icono para el botón de eliminar */
    }

    .round-button-NoVisto:hover {
        background-color: #002e6d;
    }

        .round-button-NoVisto:hover i {
            color: white; /* Asegura que el icono sea blanco en hover */
        }



.round-button-Visto {
    border-color: #cccccc;
}

    .round-button-Visto i {
        color: #cccccc; /* Color del icono para el botón de eliminar */
    }

    .round-button-Visto:hover {
        background-color: #cccccc;
    }

        .round-button-Visto:hover i {
            color: white; /* Asegura que el icono sea blanco en hover */
        }


@media (max-width: 768px) {
    .mobile-indicator {
        display: block !important;
    }
}

@media (min-width: 769px) {
    .mobile-indicator {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .hide-on-mobile {
        display: none;
    }

    .show-on-mobile {
        display: block;
    }
}

@media (min-width: 769px) {
    .hide-on-mobile {
        display: block;
    }

    .show-on-mobile {
        display: none;
    }
}

.rz-cell-filter .rz-cell-filter-label > .rzi {
    color: #000000;
    font-weight: 900;
    cursor: pointer
}

.rz-datatable-thead th, .rz-grid-table thead th {
    border-bottom: 1px solid #172632;
}

.rz-sortable-column .rzi-sort-asc {
    color: white;
}

.rz-sortable-column .rzi-sort-desc {
    color: white
}

.switch-container {
    padding: 1rem;
    background-color: #f5f5f560;
    border-radius: 8px;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
}

.switch-label {
    font-size: 1rem;
    font-weight: 550;
    color: #333;
}

.custom-switch {
    width: 50px;
    height: 20px;
    position: relative;
    background-color: #ccc; /* Default background for inactive state */
    border-radius: 15px;
    transition: background-color 0.3s ease-in-out;
}




.rz-switch.rz-switch-checked .rz-switch-circle:before {
    background: #4CAF50;
    transform: translateX(2rem);
}

.custom-switch.rz-switch-checked {
    background-color: #b8efbb; /* Green background when checked */
}






.client-list-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.title-section {
    display: flex;
    align-items: center;
    flex-grow: 1;
}

.ItruckCardButton {
    background-color: #002e6d; /* Use a more subtle yellow */
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: bold;
    transition: background-color 0.3s ease;
    margin-top: 10px;
}

.tooltipLicencia {
    visibility: hidden;
    width: 150px;
    background-color: rgba(0, 0, 0, 0.75);
    color: white;
    text-align: center;
    border-radius: 4px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%; /* Position the tooltip above the badge */
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 0.8rem;
    white-space: nowrap;
}

.custom-badge {
    position: relative;
    cursor: pointer;
    display: inline-block;
    margin-left: 10px;
}

    .custom-badge:hover .tooltipLicencia {
        visibility: visible;
        opacity: 1; /* Show the tooltip with a fade-in effect */
    }

/* Responsive Design for Mobile */
@media (max-width: 768px) {
    .client-list-container {
        flex-direction: column;
        align-items: flex-start;
    }

    .title-section {
        width: 100%;
        justify-content: space-between;
    }

    .ItruckCardButton {
        margin-top: 0;
        margin-left: 10px;
    }

    .custom-badge {
        margin-left: 0;
        margin-top: 10px;
    }
}

.rz-grid-filter-buttons .rz-button.rz-shade-default.rz-apply-filter {
    background-color: #002e6d;
    color: #ffffff;
}

.rz-apply-filter .rz-button-text {
    visibility: hidden; /* Hide the original text */
    position: relative;
}

    .rz-apply-filter .rz-button-text::after {
        content: 'Buscar'; /* Replace 'New Text' with your desired text */
        visibility: visible;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        font-weight: 600;
        text-align: center;
        visibility: visible;
        font-size: 12px;
    }
/* Hide the original text */
.rz-clear-filter .rz-button-text {
    visibility: hidden;
    position: relative;
}

    /* Inject new text using the ::after pseudo-element */
    .rz-clear-filter .rz-button-text::after {
        content: 'Limpiar'; /* Replace 'Limpiar' with your desired translation */
        visibility: visible;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        text-align: center;
        visibility: visible;
        font-size: 12px;
        font-weight: 600;
    }


.round-button-gold {
    width: 40px;
    height: 40px;
    border-radius:30%;
    border: 2px solid #002e6d;
    background-color: #002e6d;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s, color 0.3s, width 0.3s, border-radius 0.3s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

    .round-button-gold i {
        font-size: 18px;
        transition: transform 0.3s;
        color: #ffffff; /* Icono blanco por defecto */
        z-index: 1;
    }

    .round-button-gold:hover {
        width: 130px; /* Expande el botón en hover para mostrar el texto */
        border-radius: 15px; /* Cambia a forma rectangular */
        background-color: white; /* Fondo blanco en hover */
        justify-content: flex-start; /* Alinea el contenido a la izquierda */
        padding-left: 10px; /* Espacio a la izquierda para el icono y el texto */
    }

        .round-button-gold:hover i {
            color: #002e6d; /* Color del icono dorado en hover */
            transform: translateX(0); /* Ajusta la posición del icono */
        }

    .round-button-gold span {
        opacity: 0;
        transition: opacity 0.3s, transform 0.3s;
        position: absolute;
        left: 35px; /* Alinea el texto más cerca del icono */
        color: #333333; /* Color del texto dorado en hover */
    }

    .round-button-gold:hover span {
        opacity: 1;
        transform: translateX(0);
    }

/* Estilos para dispositivos móviles */
@media screen and (max-width: 768px) {
    .round-button-gold {
        width: 93px; /* Siempre mostrar el botón expandido en móviles */
        border-radius: 15px;
        justify-content: flex-start;
        padding-left: 10px;
        font-size: 14px;
    }

        .round-button-gold i {
            color: white; /* Icono dorado en móviles */
            margin-right: 10px;
            font-size: 14px;
        }

        .round-button-gold span {
            opacity: 1;
            transform: translateX(0);
            position: static; /* Alinea el texto junto al icono */

            color: white;
        }

    .button-containerCe {
        padding-top: 10px;
    }
}


.rz-column-resizer {
    width: 1px;
    background: #5e6565;
}

.rz-panel-menu .rz-navigation-menu .rz-navigation-item-active, .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper-active {
    background-color: #002e6d59;
    color: var(--rz-panel-menu-item-2nd-level-active-color);
    font-weight: var(--rz-panel-menu-item-2nd-level-active-font-weight);
}

    .rz-panel-menu .rz-navigation-menu .rz-navigation-item-active .rz-navigation-item-icon, .rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper-active .rz-navigation-item-icon {
        color: black;
    }


.rz-calendar-view td .rz-state-active, .rz-calendar-view td .rz-state-active.rz-calendar-today {
    color: var(--rz-datepicker-calendar-selected-color);
    background-color: #002e6d;
    padding: var(--rz-datepicker-calendar-item-padding);
    box-shadow: none;
}

.rz-state-highlight.rz-menuitem, .rz-state-highlight.rz-autocomplete-list-item, .rz-state-highlight.rz-multiselect-item, .rz-autocomplete-items li.rz-state-highlight, .rz-dropdown-items li.rz-state-highlight, .rz-multiselect-items li.rz-state-highlight, .rz-dropdown-item.rz-state-highlight {
    background-color: #002e6d80;
    color: black;
    box-shadow: var(--rz-dropdown-item-selected-shadow);
    font-weight: 600;
    border-radius: 0;
}

.rz-calendar-view td .rz-state-active.rz-state-focused, .rz-calendar-view td .rz-state-active:hover, .rz-calendar-view td .rz-state-active.rz-calendar-today.rz-state-focused, .rz-calendar-view td .rz-state-active.rz-calendar-today:hover {
    color: var(--rz-datepicker-calendar-selected-hover-color);
    background-color: #002e6d;
}

.rz-tabview.rz-tabview-top > .rz-tabview-nav .rz-tabview-selected {
    border-top-width: 0;
    border: 3px solid #28a745;
    border-radius: 10px 10px 0 0; /* Redondeado en la parte superior */
}

.rz-tabview-nav .rz-tabview-selected {
    color: #fff;
    position: relative;
    background-color: #002e6d;
}


.CustomTabs {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #ffffffff;
    padding: 10px;
}



.CustomTab {
    padding: 10px 15px; /* Reducido para hacer los tabs más compactos */
    cursor: pointer;
    font-size: 14px;
    border-radius: 5px 5px 0 0;
    transition: background-color 0.3s, color 0.3s, border 0.3s;
    display: flex;
    align-items: center;
    font-weight: 500;
    margin-right: 2px; /* Espaciado reducido entre los tabs */
    background-color: #f1f1f1;
    color: #7a7a7a;
}

    .CustomTab i {
        margin-right: 8px; /* Espaciado entre el icono y el texto */
    }

.CustomTabInactive:hover {
    background-color: #e0e0e0;
}

.CustomTabActive {
    background-color: #002e6d;
    color: white;
    border: 1px solid #002e6d;
    border-bottom: none;
    z-index: 10;
}

.CustomTabDisabled {
    background-color: #dee2e6;
    color: #adb5bd;
    cursor: not-allowed;
}

.NavButton {
    background-color: #002e6d;
    border: none;
    padding: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    color: white;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease;
}

    .NavButton:disabled {
        background-color: #6c757d;
        cursor: not-allowed;
    }

    .NavButton:hover:not(:disabled) {
        background-color: #ff9800;
    }

.CustomTabs {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #ffffff;
    padding: 10px;
}

.CustomTabContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 10px;
    border-bottom: 2px solid #002e6d;
    /* padding-left: 10px; */
    /* padding-right: 10px; */
    padding-top: 10px;
    border-top: 1px solid #f3f3f3;
    z-index: 1;
}

.CustomTab {
    padding: 14px 20px;
    cursor: pointer;
    font-size: 1em;
    border-radius: 5px 5px 0 0;
    transition: background-color 0.3s, color 0.3s, border 0.3s;
    display: flex;
    align-items: center;
    font-weight: 600;
    background-color: #f1f1f1;
    color: #7a7a7a;
}

/* Ajuste en el espaciado de los tabs */
.CustomTabContainer .CustomTab {
    margin-right: 20px; /* Espaciado reducido entre los tabs */
}

.CustomTab i {
    margin-right: 8px; /* Espaciado entre el icono y el texto */
    font-size: 1.5em;
}

.CustomTabInactive:hover {
    background-color: #e0e0e0;
}

.CustomTabActive {
    background-color: #002e6d;
    color: white;
    border: 1px solid #002e6d;
    border-bottom: none;
    z-index: 10;
}

.CustomTabDisabled {
    background-color: #dee2e6;
    color: #adb5bd;
    cursor: not-allowed;
}

.NavButton {
    background-color: #002e6d;
    border: none;
    padding: 0;
    width: 30px;
    height: 30px;
    border-radius: 30%;
    cursor: pointer;
    color: white;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease;
}

    .NavButton:disabled {
        background-color: #6c757d;
        cursor: not-allowed;
    }

    .NavButton:hover:not(:disabled) {
        background-color: #ff9800;
    }

.CustomTabContent {
    width: 100%;
    box-shadow: none; /* Eliminado para un aspecto más plano */
    margin-top: 0; /* Alineado correctamente con los tabs */
    position: relative;
    z-index: 1;
}

/* Media query para modo móvil */
@media (max-width: 768px) {
    .CustomTabContainer {
        justify-content: space-between; /* Para centrar los elementos de las pestañas en móviles */
    }

    .CustomTab {
        display: none; /* Oculta las pestañas en modo móvil */
    }

    .CustomTabActive {
        display: flex; /* Solo muestra la pestaña activa en modo móvil */
        margin-left: 25px;
    }

    .NavButton {
        display: flex; /* Asegura que las flechas de navegación estén visibles en móvil */
    }
}
/* Ocultar completamente la barra de desplazamiento en WebKit (Chrome, Safari) */
::-webkit-scrollbar {
    width: 1px; /* Ocultar la barra de desplazamiento vertical */
    height: 1px; /* Ocultar la barra de desplazamiento horizontal */
}

/* Estilo para navegadores Firefox */
* {
    scrollbar-width: none; /* Ocultar la barra de desplazamiento en Firefox */
}

/* Opcional: Eliminar el área reservada para el track en WebKit */
::-webkit-scrollbar-track {
    background: transparent; /* Asegura que el track sea transparente */
}

.ItCuadro-containerSumary {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 16px; /* Ajusta según sea necesario */
    padding: 10px;
    background-color: transparent; /* Fondo opcional */
    border-radius: 5px; /* Bordes redondeados opcionales */
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}

.ItCuadro-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 16px; /* Ajusta según sea necesario */
    padding: 10px;
    background-color: transparent; /* Fondo opcional */
    border-radius: 5px; /* Bordes redondeados opcionales */
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}

.ItCuadro-text {
    font-size: 18px; /* Tamaño del texto de la fecha */
    font-weight: bold;
    color: #494848;
}

.ItCuadro-label {
    font-size: 12px; /* Tamaño del texto "Fecha Actual" */
    color: #494848; /* Ajusta el color si es necesario */
}

.text-green {
    color: green;
}

.text-red {
    color: red;
}

.rz-dialog {
    width: 60% !important
}

.info-section {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columnas para la mayoría de las secciones */
    gap: 1rem;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.info-item {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    padding: 10px 15px;
    border-radius: 5px;
    border: 1px solid #ddd;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
}

.info-label {
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.info-value {
    font-size: 1rem;
    color: #555;
}

/* Asegurar que la sección de notas ocupe una fila completa */
.info-notes {
    grid-column: 1 / -1; /* Hace que la sección de notas ocupe toda la fila */
}

@media screen and (max-width: 768px) {
    .info-section {
        grid-template-columns: 1fr; /* 1 columna en pantallas pequeñas */
    }

    .info-item {
        padding: 15px;
    }

    .info-label {
        font-size: 1.1rem;
    }

    .info-value {
        font-size: 1rem;
    }
}


.text-Darknegro {
    color: #2C2C2C;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
}

.rz-timeline-item:before {
    height: 10px !important
}




.rz-timeline-row .rz-timeline-item.Completo:before {
    background-color: green;
    height: 10px !important;
}

@media screen and (max-width: 768px) {
    .rz-timeline-item:before {
        height: 100% !important;
    }

    .rz-timeline-item.Completo:before {
        background-color: green;
    }

    .rz-timeline-column .rz-timeline-item:before {
        width: 5px;
    }
}

.itruckMaps-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.6);
    padding-top: 60px;
}

.itruckMaps-modal-content {
    background-color: #fff;
    margin: 5% auto;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #ccc;
    width: 90%;
    max-width: 900px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.itruckMaps-close {
    color: #444;
    float: right;
    font-size: 24px;
    font-weight: bold;
    margin-top: -10px;
}

    .itruckMaps-close:hover,
    .itruckMaps-close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }

.itruckMaps-modal-title {
    font-size: 24px;
    margin-bottom: 15px;
    color: #333;
    text-align: center;
}

.itruckMaps-modal-body {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.itruckMaps-left {
    flex: 1;
    min-width: 300px;
}

.itruckMaps-right {
    flex: 1;
    min-width: 300px;
}

.itruckMaps-info {
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}

    .itruckMaps-info legend {
        font-size: 18px;
        font-weight: bold;
        color: #002e6d;
    }

    .itruckMaps-info p {
        font-size: 16px;
        margin: 10px 0;
        color: #555;
    }

/* Sección del Clima */
.itruckMaps-weather {
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

    .itruckMaps-weather legend {
        font-size: 18px;
        font-weight: bold;
        color: #002e6d;
    }

.itruckMaps-weather-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.itruckMaps-weather-column {
    flex: 1;
    text-align: center;
    padding: 0 10px;
}

.itruckMaps-weather-icon {
    flex: 0 0 150px; /* Ampliar la columna del ícono */
    text-align: center;
}

    .itruckMaps-weather-icon img {
        max-width: 220px; /* Ampliar el tamaño máximo del ícono */
        max-height: 220px;
        margin: auto;
        height: 90px;
    }

.itruckMaps-weather-content p {
    margin: 5px 0;
    font-size: 16px;
    color: #555;
}

/* Sección del Mapa */
.itruckMaps-modal-map {
    text-align: center;
}

    .itruckMaps-modal-map img {
        max-width: 100%;
        max-height: 400px;
        border-radius: 8px;
        border: 1px solid #ddd;
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
    }

/* Diseño Responsive */
@media screen and (max-width: 768px) {
    .itruckMaps-modal-body {
        flex-direction: column;
    }

    .itruckMaps-modal {
        padding-top: 110px;
    }

    .itruckMaps-modal-content {
        background-color: #fff;
        margin: 5% auto;
        padding: 20px;
        border-radius: 10px;
        border: 1px solid #ccc;
        width: 90%;
        max-width: 900px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        height: 1150px !important;
    }

    .itruckMaps-left,
    .itruckMaps-right {
        max-width: 100%;
    }



    .itruckMaps-weather-column,
    .itruckMaps-weather-icon {
        text-align: center;
        padding: 5px 0;
    }

        .itruckMaps-weather-icon img {
            margin-bottom: 10px;
        }

    .itruckMaps-modal-map img {
        max-height: 100% !important;
        height: 400px !important;
        width: 100% !important;
    }

    .itruckMaps-close {
        font-size: 54px;
    }
}


.custom-link {
    color: #002e6d; /* Color del enlace normal */
    text-decoration: none; /* Quitar subrayado */
    font-weight: bold; /* Hacer el texto en negrita */
}

    .custom-link:visited {
        color: #002e6d; /* Color del enlace visitado */
    }

    .custom-link i {
        margin-right: 5px; /* Espacio entre el icono y el texto */
        color: #555; /* Color del icono */
    }

    /* Cambia el color al pasar el ratón por encima */
    .custom-link:hover {
        color: #555; /* Color al pasar el mouse */
        text-decoration: underline; /* Subrayado al pasar el mouse */
    }

    .custom-link i:hover {
        color: #555; /* Color al pasar el mouse */
    }


.rz-timepicker .rz-button-md {
    background: #002e6d;
}




.itruckMapsRutas {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.itruckMapsRutasleft {
    flex: 1;
    min-width: 300px;
}

.itruckMapsRutasright {
    flex: 1;
    min-width: 300px;
}

.itruckMapsRutasinfo {
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
}

    .itruckMapsRutasinfo legend {
        font-size: 18px;
        font-weight: bold;
        color: #002e6d;
    }

    .itruckMapsRutasinfo p {
        font-size: 16px;
        margin: 10px 0;
        color: #555;
    }


.info-sectionTwo {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Tres columnas de igual tamaño */
    gap: 1rem;
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-top: 15px;
}

    .info-sectionTwo > div:nth-child(1) {
        grid-column: 1 / 2; /* Coloca el primer elemento en la primera columna */
        text-align: left; /* Alinea el contenido del primer elemento a la izquierda */
    }

    .info-sectionTwo > div:nth-child(2) {
        grid-column: 3/ 4; /* Coloca el segundo elemento en la segunda columna */
        text-align: center; /* Centra el contenido del segundo elemento */
    }



.info-itemTwo {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    padding: 10px 15px;
    border-radius: 5px;
    border: 1px solid #ddd;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
}

.info-labelTwo {
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.info-valueTwo {
    font-size: 1rem;
    color: #555;
}


#autocomplete {
    width: 100%;
    font-size: 12px;
    border-radius: 4px;
    margin-bottom: 10px;
}


/* Media query para pantallas más pequeñas */
@media (max-width: 768px) {
    .itruckMapsRutas {
        flex-direction: column; /* Cambia a una columna en pantallas más pequeñas */
        gap: 10px; /* Reduce el espacio entre los elementos */
    }

    .info-sectionTwo {
        grid-template-columns: 1fr 50px; /* Una columna principal y una más pequeña para el ícono */
        gap: 0.5rem;
    }

        .info-sectionTwo > div:nth-child(1) {
            font-size: 0.9rem; /* Reduce el tamaño de la fuente para ahorrar espacio */
        }

        .info-sectionTwo > div:nth-child(2) {
            grid-column: 2 / 3;
            justify-self: flex-end; /* Alinea el botón a la derecha */
        }
}

@media (max-width: 480px) {
    .itruckMapsRutasinfo p {
        font-size: 14px; /* Ajusta el tamaño del texto en pantallas muy pequeñas */
    }
}


/* Contenedor general que contiene todas las facturas */
.itruckFact-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Dos columnas para pantallas grandes */
    gap: 20px;
    width: 100%;
    max-width: 1200px; /* Limita el ancho máximo del contenedor */
    margin: 0 auto; /* Centra el contenedor */
}

/* Estilos del ticket con el tema ItruFact */
.itruckFact-ticket {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
    position: relative;
    font-family: 'Roboto', sans-serif;
    overflow: hidden; /* Para asegurar que los elementos no se salgan del contenedor */
    display: flex;
    flex-direction: column;
    gap: 15px; /* Añade espacio entre las secciones */
}

.itruckFact-view-button {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 35px;
    height: 35px;
    background-color: #333;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.itruckFact-header h1 {
    font-size: 22px;
    margin-bottom: 5px;
    text-align: center;
    color: #333;
}

.itruckFact-header p {
    text-align: center;
    margin: 5px 0;
    font-size: 14px;
    color: #777;
}

.itruckFact-info p {
    font-size: 15px;
    margin: 5px 0;
    color: #555;
}

.itruckFact-total p {
    font-size: 16px;
    margin: 5px 0;
    text-align: right;
    color: #333;
}

    .itruckFact-total p strong {
        color: #111;
    }

.itruckFact-footer {
    text-align: center;
    margin-top: 15px;
    font-size: 14px;
    color: #888;
}

/* Estilo para borde recortado con tema ItruFact */
.itruckFact-ticket::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20px;
    background: linear-gradient(to right, transparent 50%, #fff 50%);
    background-size: 10px 20px;
}

/* Media query para pantallas pequeñas */
@media (max-width: 768px) {
    .itruckFact-container {
        grid-template-columns: repeat(1, 1fr); /* Una columna en pantallas pequeñas */
    }

    .itruckFact-ticket {
        padding: 15px;
        gap: 10px; /* Espacio entre secciones reducido para pantallas pequeñas */
    }
}


.rz-scheduler-nav-views .rz-button.rz-primary.rz-state-active {
    background-color: #002e6d59;
    border-color: #002e6dff;
    color: #000000;
    font-weight: 600;
}

.rz-event-content {
    background: #002e6d;
    color: white;
    overflow: hidden;
}

.rz-scheduler a.rz-event-list-btn {
    color: #607D8B;
}

    .rz-scheduler a.rz-event-list-btn:hover {
        color: #ff9800;
    }

.custom-timeline {
    position: relative;
    padding: 20px 0;
    max-width: 700px;
    margin: 0 auto;
}

    .custom-timeline::before {
        content: '';
        position: absolute;
        top: 20px;
        bottom: 0;
        left: 5px; /* Centra la línea en relación al marcador */
        width: 2px;
        background: #ddd;
    }

.timeline-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
    position: relative;
    cursor: pointer;
    padding-left: 10px; /* Ajusta el padding para que el contenido no se salga */
}

.timeline-marker {
    width: 12px;
    height: 12px;
    background-color: #CDC040;
    border-radius: 50%;
    position: absolute;
    left: 0px; /* Alinea el marcador con la línea */
    top: 0px;
    border: 2px solid white;
    box-shadow: 0 0 0 3px #CDC040;
}

.past-task .timeline-marker {
    background-color: #ccc;
    box-shadow: 0 0 0 3px #aaa;
}

.timeline-content {
    background: #fff;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    width: 100%;
}

.timeline-date {
    font-weight: bold;
    font-size: 0.9rem;
    color: #002e6d;
    margin-bottom: 5px;
}

.timeline-details {
    flex-grow: 1;
}

.timeline-title {
    margin: 0;
    font-size: 0.8rem;
    color: #333;
}

/* Responsive Design */
@media (max-width: 767px) {
    .timeline-item {
        flex-direction: column;
        align-items: flex-start;
        padding-left: 15px; /* Ajuste para dispositivos pequeños */
    }

    .timeline-marker {
        left: 1px; /* Ajusta el marcador para dispositivos pequeños */
    }

    .timeline-content {
        padding: 5px;
        flex-direction: column;
        align-items: flex-start;
    }

    .timeline-date {
        margin-bottom: 5px;
        font-size: 0.85rem;
    }

    .timeline-title {
        font-size: 0.95rem;
    }

    .custom-content {
        padding: 10px !important;
    }
}





/* Tareas pasadas */
.past-task .timeline-marker {
    background-color: #aaa; /* Gris */
    box-shadow: 0 0 0 3px #aaa;
}

/* Tareas próximas, en 1 días  */
.red-task .timeline-marker {
    background-color: #c10e34; /* Amarillo */
    box-shadow: 0 0 0 3px #c10e34;
}

/* Tareas próximas, en 3 días o menos */
.warning-task .timeline-marker {
    background-color: #002e6d; /* Amarillo */
    box-shadow: 0 0 0 3px #002e6d;
}

/* Tareas próximas, en 7 días o menos */
.upcoming-task .timeline-marker {
    background-color: #ff6600; /* Naranja */
    box-shadow: 0 0 0 3px #ff6600;
}

/* Tareas futuras, más de 7 días */
.future-task .timeline-marker {
    background-color: #28a745; /* Verde */
    box-shadow: 0 0 0 3px #28a745;
}

/* Estilo para el fondo del modal */
.NotiModal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
}

/* Mostrar el modal */
.NotiModal-show {
    display: block;
}

/* Ocultar el modal */
.NotiModal-hide {
    display: none;
}

/* Contenido del modal */
.NotiModal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 500px;
    border-radius: 10px;
}

/* Botón de cierre del modal */
.NotiModal-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

    .NotiModal-close:hover,
    .NotiModal-close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }


/* Modal General */
.ITDoc-modal-visible {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}

.ITDoc-modal-hidden {
    display: none;
}

.ITDoc-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9998;
}

.ITDoc-modal-content {
    background-color: #fff;
    position: relative;
    margin: 50px auto;
    padding: 20px;
    width: 90%;
    max-width: 500px;
    max-height: 80%; /* Limitar la altura máxima del modal */
    border-radius: 12px;
    z-index: 9999;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow-y: auto; /* Habilitar scroll dentro del modal si el contenido es mayor */

    border-bottom: 4px solid #002e6d;
}

.ITDoc-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .ITDoc-modal-header h5 {
        margin: 0;
        font-size: 1.25rem;
    }

.ITDoc-modal-body {
    margin-top: 20px;
}

.ITDoc-close-btn {
    background-color: #002e6d; /* Color del botón */
    border: none; /* Sin bordes */
    color: #fff; /* Color de la "X" en blanco */
    font-size: 1.5rem; /* Tamaño de la fuente para la "X" */
    cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
    width: 40px; /* Ancho del botón */
    height: 40px; /* Altura del botón */
    border-radius: 50%; /* Hace el botón redondo */
    display: flex; /* Usar flexbox para centrar la "X" */
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centrar verticalmente */
}

    .ITDoc-close-btn:hover {
        background-color: #366FA0; /* Un color más oscuro al hacer hover */
    }

/* Área de carga de imagen */
.ITDoc-upload-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.ITDoc-image-upload-box {
    width: 100%;
    height: 200px;
    border: 2px dashed #002e6d;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: #002e6d;
    background-color: #f7faff;
    border-radius: 12px;
    transition: background-color 0.3s;
}

    .ITDoc-image-upload-box:hover {
        background-color: rgba(0, 123, 255, 0.05);
    }

.ITDoc-uploaded-img {
    max-width: 100%;
    max-height: 300px; /* Limitar la altura de la imagen dentro del modal */
    height: auto;
    border-radius: 12px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

/* Contenedor de la imagen */
.ITDoc-image-container {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Overlay sobre la imagen */
.ITDoc-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Fondo oscuro transparente */
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s;
    border-radius: 12px;
}

.ITDoc-image-container:hover .ITDoc-image-overlay {
    opacity: 1; /* Mostrar el overlay al pasar el ratón sobre la imagen */
}

/* Icono de eliminar (la X) */
.ITDoc-remove-icon {
    font-size: 2rem;
    cursor: pointer;
}

/* Botón personalizado */
.ITDoc-btn-custom {
    padding: 10px 20px;
    background-color: #002e6d;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
}

    .ITDoc-btn-custom:disabled {
        background-color: #cccccc;
        cursor: not-allowed;
    }

/* Acciones de subir */
.ITDoc-upload-actions {
    margin-top: 20px;
}


/* Overlay de carga que cubre toda la pantalla */
.ITDoc-fullscreen-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Fondo oscuro transparente */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000; /* Asegurar que esté por encima de todo el contenido */
}

/* Contenido dentro del overlay (spinner y texto) */
.ITDoc-loading-content {
    text-align: center;
    color: white;
}

/* Spinner para mostrar la carga */
.ITDoc-spinner {
    border: 8px solid #002e6d;
    border-top: 8px solid #002e6d;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spinS 1s linear infinite;
}

/* Animación del spinner */
@keyframes spinS {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


/* Estilos personalizados para el modal */
.modal-it {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Fondo semitransparente */
}

.modal-content-it {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 400px;
    text-align: center;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.close-it {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

    .close-it:hover,
    .close-it:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

/* Imagen responsive */
.img-responsive-it {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}


.WizardITruck {
    margin: 0 auto;
    padding: 20px;
}

.wizard-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

    .wizard-header .step {
        width: 33%;
        text-align: center;
        padding: 10px;
        color: #aaa; /* Color inactivo */
        position: relative;
        font-size: 14px;
    }

        .wizard-header .step i {
            font-size: 30px;
            display: block;
            margin-bottom: 5px;
            color: #aaa; /* Color inactivo */
            transition: color 0.3s ease;
        }

        .wizard-header .step.active {
            color: #002e6d; /* Color activo para el texto */
        }

            .wizard-header .step.active i {
                color: #002e6d; /* Color activo para el icono */
            }

        .wizard-header .step:after {
            content: '';
            position: absolute;
            top: 50%;
            right: 0;
            width: 1px;
            height: 50px;
            background-color: #002e6d;
            transform: translateY(-50%);
        }

        .wizard-header .step:last-child:after {
            display: none;
        }

.wizard-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
}

.relo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-weight: 600;
    font-size: 2em;
}

.btnredondo {
    display: inline-block;
    margin-left: 10px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
    background-color: #002e6d;
    color: white;
    font-size: 24px;
    font-weight: bold;
}

.btn-wizard {
    padding: 10px 20px;
    background-color: #002e6d;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin: 10px;
    transition: background-color 0.3s;
}

    .btn-wizard:hover {
        background-color: #002e6d;
    }

    .btn-wizard:disabled {
        background-color: #ccc;
        cursor: not-allowed;
    }

@media (max-width: 768px) {
    .WizardITruck {
        padding: 15px;
    }

    .wizard-header .step {
        font-size: 14px;
    }
}


.containerExtra {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Para pantallas grandes */
    gap: 20px;
    padding: 20px;
}

/* Imagen a la izquierda */
.image-containerExtra {
    position: relative;
    width: 100%; /* Ajusta el ancho según sea necesario */
    max-width: 600px; /* Máximo ancho */
    overflow: hidden;
}

    .image-containerExtra img {
        width: 100%;
        height: auto;
        transition: transform 0.3s ease, transform-origin 0.3s ease; /* Transición suave */
    }

    /* Aplica el zoom en hover */
    .image-containerExtra.zoom img {
        transform: scale(1.5); /* Ajusta el nivel de zoom */
    }

/* Formularios a la derecha */
.form-containerExtra {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas para PC */
    gap: 10px;
}



/* Formularios a la derecha */
.form-containerExtra {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas para PC */
    gap: 10px;
}

@media (max-width: 768px) {
    .containerExtra {
        grid-template-columns: 1fr; /* Una columna para pantallas pequeñas */
    }

    .form-containerExtra {
        grid-template-columns: 1fr; /* Los campos en una sola columna en móviles */
    }
}


.linea-texto-linea {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
}

    .linea-texto-linea::before,
    .linea-texto-linea::after {
        content: "";
        flex-grow: 1;
        height: 1px;
        background-color: #000;
        margin: 0 10px;
    }

    .linea-texto-linea span {
        font-size: 18px;
        font-weight: bold;
    }


.factura-containerDos {
    margin-left: auto;
    margin-right: 0;
    margin-top: 20px;
    text-align: right;
    border: 1px solid #ccc;
    padding: 20px;
    border-radius: 8px;
    background-color: #f9f9f9;
    width: 90%
}

.factura-container {
    margin-left: auto;
    margin-right: 0;
    margin-top: 20px;
    text-align: right;
    border: 1px solid #ccc;
    padding: 20px;
    border-radius: 8px;
    background-color: #f9f9f9;
}

.factura-item {
    margin-bottom: 10px;
    font-size: 16px;
}

    .factura-item span {
        font-weight: bold;
    }

.factura-total {
    font-size: 18px;
    font-weight: bold;
    margin-top: 20px;
}

.imagezoo {
    max-width: 100%; /* Asegura que la imagen no exceda el tamaño del contenedor */
    height: auto; /* Mantiene la relación de aspecto de la imagen */
    display: block; /* Evita espacios en línea debajo de la imagen */
    border-radius: 8px; /* Bordes redondeados */
    object-fit: cover; /* Opcional: ajusta la imagen dentro de su contenedor */
}


.zoom-area {
    position: absolute;
    width: 120px;
    height: 120px;
    overflow: hidden;
    border: 1px solid #000;
    display: none;
    pointer-events: none;
    border-radius: 30%; /* Circular */
}

#zoom-image {
    position: absolute;
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
}


.texrregister {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    color: black
}

.grid-containerBTNCua {
    display: grid;
    grid-template-columns: 1fr; /* Por defecto una sola columna */
    gap: 10px; /* Espacio entre los elementos */
    justify-content: end;
}


.button-containerD {
    display: flex;
    justify-content: center;
}

.button-container {
    display: flex;
    grid-template-columns: repeat(3, 1fr); /* Cuatro columnas */
    justify-content: end;
    gap: 10px; /* Espacio entre los botones */
}


.grid-containerBTNtre {
    display: flex;
    gap: 10px; /* Espacio entre los elementos */
    justify-content: end;
    grid-template-columns: repeat(3, 1fr); /* Cuatro columnas */
}



.grid-containerBTNDos {
    display: grid;
    grid-template-columns: 1fr; /* Por defecto una sola columna */
    gap: 10px; /* Espacio entre los elementos */
    justify-content: end;
}

.button-container2 {
    display: flex;
    grid-template-columns: repeat(4, 1fr); /* Cuatro columnas */
    justify-content: end;
    gap: 10px; /* Espacio entre los botones */
}

@media (max-width: 768px) {
    .grid-containerBTNDos {
        grid-template-columns: repeat(2, 1fr) !important;
        justify-content: end;
    }

    .button-container2 {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* Cuatro columnas */
        justify-content: end;
        gap: 10px; /* Espacio entre los botones */
    }

    .grid-containerBTNtre {
        display: GRID;
        gap: 10px;
        justify-content: end;
        grid-template-columns: repeat(1, 1fr);
    }

    .grid-containerBTNCua {
        grid-template-columns: repeat(2, 1fr) !important;
        justify-content: end;
    }
}



/* Estilos generales para el fondo del modal */
.ModalDemo-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Fondo ligeramente oscuro */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 998;
}

@media (max-width: 768px) {
    /* Contenido del modal */
    .ModalDemo-content {
        width: 100% !important;
    }
}
.form-group-row {
    display: flex !important;
    gap: 15px !important;
    padding: 15px;
}

.half-width {
    flex: 1 !important;
}


/* Contenido del modal */
.ModalDemo-content {
    background-color: white;
    width: 40%; /* Ajustado para un tamaño más pequeño */
 
    padding: 0; /* Sin relleno para manejar los elementos internos */
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* Para manejar el borde redondeado en el header */
    position: relative;
    border-bottom: 4px solid #002e6d;
    max-height: 90vh; /* Altura máxima relativa al viewport */
    overflow-y: auto; /* Scroll si el contenido excede */
}

/* Encabezado del modal con fondo azul */
.ModalDemo-header {
    background-color: #002e6d; /* Azul similar al de la imagen */
    padding: 0px 12px;
    color: white; /* Texto blanco */
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: grab;
}

    .ModalDemo-header h2 {
        margin: 0;
    }

.ModalDemo-close {
    background: none;
    border: none;
    font-size: 34px;
    cursor: pointer;
    color: white;
    font-weight: 700;
}

/* Cuerpo del modal */
.ModalDemo-body {
    padding: 20px; /* Espacio interno */
}

    .ModalDemo-body form {
        display: flex;
        flex-direction: column;
        gap: 20px; /* Espacio entre los campos */
    }
   

/* Estilo del botón de cierre */
.ModalDemo-close:hover {
    color: #ffffff88; /* Color de hover para el botón de cierre */
}


.ModalBien-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.ModalBien-content {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-align: center;
    animation: fadeIn 0.3s ease-in-out;
    border-bottom: 4px solid #002e6d;
}

.ModalBien-header h2 {
    margin: 0;
    font-size: 24px;
    color: #333;
}

.ModalBien-body {
    margin-top: 15px;
}

.ModalBien-image {
    width: 100%;
    height: auto;
    border-radius: 5px;
    margin-bottom: 15px;
}

.ModalBien-body p {
    font-size: 16px;
    color: #555;
    margin: 0;
}

.ModalBien-footer {
    margin-top: 20px;
}


.ModalBien-button {
    background-color: #002e6d;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    position: relative;
    overflow: hidden;
}

    .ModalBien-button i {
        margin-left: 10px;
        animation: moveRight 1s infinite linear; /* Animación continua */
    }

    .ModalBien-button:hover i {
        animation-play-state: paused; /* Pausa la animación en hover */
    }

@keyframes moveRight {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(5px); /* Mueve el ícono hacia la derecha */
    }

    100% {
        transform: translateX(0); /* Vuelve a la posición original */
    }
}

.ModalBien-button:hover {
    background-color: #002e6dc2;
}




@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.form-containerVertitcal {
    width: 100%;
    margin: 0 auto;
    gap: 10px;
    display: grid;
    gap: 10px;
}


/* Contenedor principal */
.profile-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    margin: 0 auto;
}

/* Líneas a los lados */
.line {
    width: calc(50% - 100px); /* Ajustamos el ancho para que las líneas se unan al arco sin tocar el perfil */
    height: 1px;
    background-color: #cdcbcb;
    position: relative;
    z-index: 1;
}

/* Círculos en los extremos de las líneas */
.circle {
    width: 10px;
    height: 10px;
    background-color: #ffffff;
    border: 1px solid #cdcbcb;
    border-radius: 50%;
    position: absolute;
    top: -7px;
}

.left-line .circle {
    left: 0px; /* Posicionamos el círculo al extremo izquierdo */
}

.right-line .circle {
    right: 0px; /* Posicionamos el círculo al extremo derecho */
}

/* Contenedor del perfil (imagen o inicial) */
.profile-container {
    position: relative;
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    margin: 0 20px; /* Espacio a los lados para evitar que el perfil toque las líneas */
}

/* Imagen de perfil */
.profile-image-container {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid #cdcbcb;
    overflow: hidden;
}

.profile-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Inicial del perfil */
.profile-initial-container {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #002e6d; /* Aseguramos el color de fondo */
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #002e6d; /* Borde azul */
}

.profile-initial {
    color: white;
    font-size: 40px;
    font-weight: bold;
    text-align: center; /* Asegura que la inicial esté centrada */
}

/* Arco que conecta las líneas */
.arc {
    position: absolute;
    top: -27px;
    left: 50%;
    transform: translateX(-50%);
    width: 190px;
    height: 100px;
    background-color: transparent;
    border: 1px solid #cdcbcb;
    border-radius: 100px 100px 0 0;
    border-bottom: none;
    z-index: 1;
}

/* Hover que aparece al pasar sobre el perfil */
.hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: none;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    cursor: pointer;
    z-index: 4;
}

.profile-container:hover .hover-overlay {
    display: flex;
}

.hover-overlay i {
    color: white;
    font-size: 24px;
}

/* Ícono de lápiz siempre visible para editar la imagen */
.edit-icon {
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 4;
}

    .edit-icon i {
        color: white;
        font-size: 10px;
    }

/* Estilos para pantallas pequeñas */
@media (max-width: 768px) {
    .line {
        width: 111px;
    }

    .circle {
        width: 15px;
        height: 15px;
    }

    .arc {
        width: 120px;
        height: 66px;
    }

    .profile-container {
        width: 87px;
        height: 80px;
    }

    .profile-initial {
        font-size: 30px;
    }

    .profile-wrapper {
        padding-top: 40px;
    }
}


.form-containerAD {
    max-width: 400px; /* Ajusta el ancho máximo para centrarlo */
    margin: 0 auto; /* Centra el contenedor */
    display: flex;
    flex-direction: column; /* Asegura que los elementos estén en columna */
    gap: 15px; /* Espacio entre los campos */

    padding-top: 10px;
}

.fomDivBt {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}


.fomDivBtCenter {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

@media (max-width: 768px) {
    /* Para pantallas más pequeñas, como teléfonos móviles */
    .form-containerAD {
        width: 100%; /* Asegura que ocupe todo el ancho en móvil */
        max-width: 100%; /* Anula el ancho máximo en dispositivos pequeños */
        padding: 0px; /* Añade un poco de espacio a los lados en móvil */
    }

    .fomDivBt {
        justify-content: center;
    }
}

/* Estilos del modal */
.ModalGlobal-visible {
    display: flex;
}

.ModalGlobal-hidden {
    display: none;
}

/* Fondo del modal */
.ModalGlobal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* Contenedor del modal */
.ModalGlobal-content {
    background-color: white;
    width: 40%;
    max-width: 600px;
    max-height: 90vh; /* Limitar la altura del modal */
    padding: 0;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: relative;
    border-bottom: 4px solid #002e6d;
    display: flex;
    flex-direction: column;
}

/* Header del modal */
.ModalGlobal-header {
    background-color: #002e6d;
    padding: 15px;
    color: white;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

    .ModalGlobal-header h2 {
        margin: 0;
    }

.ModalGlobal-close {
    background: none;
    border: none;
    font-size: 34px;
    cursor: pointer;
    color: white;
    font-weight: 700;
}

    .ModalGlobal-close:hover {
        color: #ffffff88;
    }

/* Cuerpo del modal con scroll habilitado */
.ModalGlobal-body {
    padding: 20px;
    overflow-y: auto; /* Habilitar el scroll dentro del cuerpo del modal */
    flex-grow: 1;
    max-height: calc(90vh - 80px); /* Ajustar la altura teniendo en cuenta el header */
    scrollbar-width: auto; /* Sobrescribir el ocultamiento global */
}

    /* Sobrescribir los estilos del scrollbar para el modal */
    .ModalGlobal-body::-webkit-scrollbar {
        width: 4px; /* Mostrar el scroll de nuevo */
    }

    .ModalGlobal-body::-webkit-scrollbar-thumb {
        background: #002e6d91; /* Color del scroll */
        border-radius: 0px;
    }

/* Ajustes para pantallas pequeñas */
@media (max-width: 768px) {
    .ModalGlobal-content {
        width: 90%;
        max-height: 90vh;
    }
}



.no-permission-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50vh;
    background-color: #f8f9fa;
}

.no-permission-card {
    background-color: #ffffff;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    max-width: 400px;
    width: 100%;
    border-bottom: 8px solid #002e6d;
}

    .no-permission-card h1 {
        font-size: 2rem;
        color: #dc3545; /* Color de alerta */
    }

    .no-permission-card p {
        margin: 1rem 0;
        font-size: 1.1rem;
        color: #333;
    }

.btn-back {
    display: inline-block;
    padding: 0.5rem 1rem;
    background-color: #002e6d;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}

    .btn-back:hover {
        background-color: #002e6d;
    }

.containerEpsacioTres {
    display: flex;
    justify-content: space-between; /* Distribuye los elementos con espacio entre ellos */
    align-items: center; /* Alinea verticalmente en el centro si los elementos tienen alturas diferentes */
    flex-wrap: wrap; /* Permite que los elementos se ajusten a la siguiente línea si no caben */
    width: 100%; /* Ajusta esto según el contenedor que quieras usar */
    gap: 10px; /* Añade espacio entre los elementos */
}

@media (max-width: 768px) {
    .containerEpsacioTres {
        justify-content: flex-start; /* Alinea los elementos al inicio */
    }

        /* Cada elemento tomará el 48% del ancho para que haya dos en una fila */
        .containerEpsacioTres > * {
            flex: 1 1 48%; /* Cada elemento ocupa el 48% del ancho */
            margin-bottom: 10px; /* Añade un poco de espacio inferior */
        }
}

@media (max-width: 768px) {
    .containerEpsacioTres {
        justify-content: flex-start; /* Alinea los elementos al inicio */
    }

        /* Cada elemento tomará el 48% del ancho para que haya dos en una fila */
        .containerEpsacioTres > * {
            flex: 1 1 48%; /* Cada elemento ocupa el 48% del ancho */
            margin-bottom: 10px; /* Añade un poco de espacio inferior */
        }
}


.TBRol-role-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Encabezado solo para pantallas grandes */
.TBRol-permission-header {
    display: none; /* Por defecto no mostrar */
    flex-direction: row;
    gap: 10px;
    padding: 10px;
    font-weight: bold;
    border-bottom: 2px solid #002e6d;
    white-space: nowrap;
    background: #002e6d;
    color: white;
    border-radius: 10px;
}

/* Elementos individuales de permiso */
.TBRol-permission-item {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.TBRol-module-name {
    flex: 1 1 200px;
    font-weight: bold;
    margin-bottom: 0;
}

.TBRol-permission-switch {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 1 1 100px;
    justify-content: space-between;
}

/* Etiquetas para nombres de acciones en pantallas pequeñas */
.TBRol-label {
    display: none;
}

/* Mostrar el encabezado y ocultar las etiquetas en pantallas grandes */
@media (min-width: 768px) {
    .TBRol-permission-header {
        display: flex;
    }


    .TBRol-permission-switch-header {
        flex: 1 1 100px;
        text-align: center;
    }

    .TBRol-module-name {
        flex: 1 1 200px;
    }

    .TBRol-permission-switch {
        flex: 1 1 100px;
        justify-content: center;
    }

    /* Ocultar las etiquetas en pantallas grandes */
    .TBRol-label {
        display: none;
    }
}

/* Para pantallas pequeñas */
@media (max-width: 768px) {
    .TBRol-permission-header {
        display: none; /* Ocultar encabezado en pantallas pequeñas */
    }

    .TBRol-permission-item {
        align-items: flex-start;
    }

    .TBRol-permission-switch {
        flex: 1 1 100%;
        justify-content: space-between;
        margin-bottom: 10px;
    }

    .TBRol-label {
        display: inline-block; /* Mostrar las etiquetas junto a los switches */
        margin-right: 10px;
    }

    .TBRol-module-name {
        flex: 1 1 200px;
        font-weight: bold;
        margin-bottom: 0;
        position: relative; /* Necesario para que la pseudo-clase ::after se posicione correctamente */
    }

        .TBRol-module-name::after {
            content: ""; /* No mostramos texto, solo la línea */
            display: block;
            width: 100%; /* Línea ocupará el ancho del contenedor */
            height: 1px; /* Altura de la línea */
            background-color: #002e6d; /* Color claro para la línea */
            position: absolute;
            bottom: -5px; /* Ajustar la distancia desde la parte inferior del texto */
            left: 0;
        }
}


.RolView {
    padding: 5px 10px;
    border-radius: 5px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    font-weight: bold;
    background-color: #002e6d;
    color: white;
}

.status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 2fr));
    gap: 20px;
}

.status-grid-item {
    background-color: #7fc7fc17;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.05);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}

    .status-grid-item i {
        font-size: 24px;
        color: #28a745; /* Color inicial del ícono */
        margin-right: 10px; /* Espacio entre ícono y número */
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
    }

    .status-grid-item:hover {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

.status-amount {
    font-size: 24px;
    font-weight: bold;
    color: #3d4451;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}

.status-description {
    font-size: 14px;
    color: #98a6ad;
    margin-top: 5px;
}

/* Colores personalizados para cada ícono */
.status-grid-item:nth-child(1) i {
    color: #28a745; /* Verde para Activos */
}

.status-grid-item:nth-child(2) i {
    color: #f44336; /* Rojo para Inactivos */
}

.status-grid-item:nth-child(3) i {
    color: #ffc107; /* Amarillo para Mantenimiento */
}

.status-grid-item:nth-child(4) i {
    color: #007bff; /* Azul para En Ruta */
}

.ItemIco {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 1024px) {
    .status-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(50%, 2fr));
        gap: 20px;
    }
}

@media (max-width: 768px) {

    .status-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(80%, 2fr));
        gap: 20px;
    }
}



.custom-linkHome {
    color: #555; /* Color del enlace normal */
    text-decoration: none; /* Quitar subrayado */
    font-weight: bold; /* Hacer el texto en negrita */
}

    .custom-linkHome:visited {
        color: #555; /* Color del enlace visitado */
    }

    .custom-linkHome i {
        margin-right: 5px; /* Espacio entre el icono y el texto */
        color: #555; /* Color del icono */
    }

    /* Cambia el color al pasar el ratón por encima */
    .custom-linkHome:hover {
        color: #555; /* Color al pasar el mouse */
        text-decoration: none; /* Subrayado al pasar el mouse */
    }

    .custom-linkHome i:hover {
        color: #555; /* Color al pasar el mouse */
    }

.link-plain {
    color: black; /* El color que quieres para el texto */
    text-decoration: none; /* Elimina el subrayado */
}

    .link-plain:visited {
        color: black; /* Color cuando el enlace ya ha sido visitado */
    }

    .link-plain:hover {
        color: black; /* Color cuando el mouse está sobre el enlace */
        text-decoration: none; /* Asegura que no aparezca subrayado en hover */
    }

    .link-plain:active {
        color: black; /* Color cuando se hace clic en el enlace */
        text-decoration: none; /* Asegura que no haya subrayado al hacer clic */
    }

.payment-icons i {
    font-size: 30px; /* Ajusta el tamaño de los iconos */
    color: #002e6d7a; /* Color de los iconos */
    margin-right: 15px; /* Añade espacio a la derecha de cada icono */
}

    .payment-icons i:last-child {
        margin-right: 0; /* Elimina el margen derecho del último ícono */
    }

    .payment-icons i:hover {
        color: #002e6d; /* Cambia el color al pasar el ratón por encima */
    }



.rz-accordion {
    box-sizing: border-box;
    border-radius: var(--rz-accordion-border-radius);
    /* box-shadow: var(--rz-accordion-shadow); */
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
}

.RutI-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px;
}

.RutI-row {
    justify-content: space-between;
    width: 100%;
    margin-bottom: 15px;
}

.RutI-row-center {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 15px;
}

.RutI-circle {
    border: 2px solid #002e6d;
    border-radius: 50px;
    padding: 10px;
    text-align: center;
    width: 100%;
}

.docdriver {
    display: grid;
    grid-template-columns: 30% 67%;
    gap: 20px; /* Espacio entre columnas, puedes ajustarlo según tus necesidades */
}

@media (max-width: 768px) {
    .docdriver {
        grid-template-columns: 1fr; /* En pantallas pequeñas (celulares) será una sola columna */
    }
}

/* Encabezado */
.FacItruck-header {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas, cada una ocupa el 50% del ancho */
    gap: 5px;
}

    .FacItruck-header p:nth-child(odd) {
        justify-self: start; /* Alinea a la izquierda */
    }

    .FacItruck-header p:nth-child(even) {
        justify-self: end; /* Alinea a la derecha */
    }


/* Ajuste para pantallas pequeñas */
@media (max-width: 768px) {
    .FacItruck-header {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }
}

/* Tabla de items */
.FacItruck-items {
    margin-top: 20px;
}

.FacItruck-table-responsive {
    width: 100%;
    overflow-x: auto;
}

.FacItruck-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
    border-radius: 10px 10px 0 0; /* Bordes superiores redondeados */
    overflow: hidden; /* Para que el contenido no sobresalga de los bordes redondeados */
}

    .FacItruck-table thead {
        background-color: #504D4D;
        color: #ffffff;
    }

    .FacItruck-table th:first-child {
        border-top-left-radius: 10px; /* Esquina superior izquierda */
    }

    .FacItruck-table th:last-child {
        border-top-right-radius: 10px; /* Esquina superior derecha */
    }

    .FacItruck-table th, .FacItruck-table td {
        padding: 12px;
        text-align: left;
        border-bottom: 1px solid #e5e7eb;
        font-size: 14px;
        white-space: nowrap; /* Evitar que el texto se corte */
    }

    .FacItruck-table th {
        font-weight: 500;
    }

    .FacItruck-table tbody tr:hover {
        background-color: #f3f4f6;
    }

/* Ocultar columnas menos importantes en pantallas pequeñas */
@media (max-width: 768px) {
    .FacItruck-col-precio, .FacItruck-col-descuento {
        display: none;
    }

    .FacItruck-table {
        min-width: auto; /* Permitir que la tabla se ajuste al ancho disponible */
    }
}

/* Totales y Información Adicional */
.FacItruck-summary {
    display: grid;
    grid-template-columns: 30% 30% 1fr;
    gap: 30px;
    margin-top: 20px;
}

/* Ajuste para pantallas más pequeñas (móviles) */
@media (max-width: 768px) {
    .FacItruck-summary {
        grid-template-columns: repeat(1, 1fr) !important;
    }
}


.FacItruck-additional-info2 {
    display: flex;
    flex-direction: column; /* Asegura que los elementos se muestren en columnas (uno debajo de otro) */
    gap: 10px; /* Espacio entre los elementos */
    margin-top: 0px; /* Margen superior opcional */
}

.FacItruck-additional-info {
    display: flex;
    flex-direction: column; /* Asegura que los elementos se muestren en columnas (uno debajo de otro) */
    gap: 10px; /* Espacio entre los elementos */
    margin-top: 20px; /* Margen superior opcional */
}

    .FacItruck-additional-info p {
        margin: 0;
    }

    .FacItruck-additional-info a {
        color: #002e6d; /* Color del enlace */
        text-decoration: none;
    }

        .FacItruck-additional-info a:hover {
            text-decoration: underline; /* Subraya el enlace al pasar el mouse */
        }



.FacItruck-totals table {
    width: 100%;
}

.FacItruck-totals td {
    padding: 8px 0;
    font-size: 14px;
}

    .FacItruck-totals td:first-child {
        text-align: left;
    }

    .FacItruck-totals td:last-child {
        text-align: right;
    }

.FacItruck-total-row td {
    font-size: 16px;
    font-weight: 700;
    border-top: 2px solid #e5e7eb;
    padding-top: 10px;
}

/* Pie de página */
.FacItruck-footer {
    text-align: center;
    margin-top: 40px;
    font-size: 14px;
    color: #6b7280;
}

    .FacItruck-footer a {
        color: #3b82f6;
        text-decoration: none;
    }

        .FacItruck-footer a:hover {
            text-decoration: underline;
        }

/* Responsividad */
@media (max-width: 768px) {
    .FacItruck-company-info, .FacItruck-invoice-info, .FacItruck-additional-info, .FacItruck-totals {
        width: 100%;
    }

        .FacItruck-invoice-info h2, .FacItruck-invoice-info p {
            text-align: left;
        }

    .FacItruck-summary {
        flex-direction: column;
    }

    .FacItruck-additional-info {
        margin-bottom: 20px;
    }
}

.espacioCardFixbuton {
    margin-bottom: 50px;
}

@media (max-width: 768px) {
    .espacioCardFixbuton {
        margin-bottom: 60px;
    }
}

.fixed-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%; /* Barra ocupa todo el ancho de la pantalla */
    background-color: #002e6d; /* Color de fondo */
    padding: 15px;
    text-align: center;
    border-top-left-radius: 10px;
}

.save-button {
    background-color: #fff; /* Color de fondo del botón */
    color: #002e6d; /* Color del texto */
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

    .save-button:hover {
        background-color: #e5e7eb; /* Cambia color en hover */
    }

    .save-button i {
        margin-left: 10px;
        animation: moveRight 1s infinite linear; /* Animación continua */
    }

    .save-button:hover i {
        animation-play-state: paused; /* Pausa la animación en hover */
    }

.FacItruck-totals {
    margin-top: 20px;
    width: 100%;
}

.FacItruck-totals-header {
    background-color: #002e6d; /* Color de fondo */
    color: white; /* Color del texto */
    font-size: 18px;
    padding: 10px;
    text-align: center;
    border-radius: 10px 10px 0 0; /* Bordes redondeados en la parte superior */
}

.FacItruck-total-row td {
    font-weight: bold;
    padding-top: 10px;
    border-top: 2px solid #e5e7eb;
}

@media (max-width: 1024px) {
    .FacItruck-summary {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        margin-top: 20px;
    }
}




/* Estilos generales */
body.modalim-modal-open {
    overflow: hidden;
}

/* Contenedor de la imagen */
.modalim-image-container {
    position: relative;
    width: 100%;
    max-width: 300px;
    margin: auto;
}

/* Estilos para el overlay */
.modalim-image-overlay {
    position: relative;
    display: inline-block;
    width: 100%;
    cursor: zoom-in;
}

    /* Imagen inicial */
    .modalim-image-overlay img {
        width: 100%;
        display: block;
        border-radius: 8px;
    }

    /* Fondo oscuro sobre la imagen */
    .modalim-image-overlay::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5); /* Fondo oscuro semitransparente */
        border-radius: 8px;
        pointer-events: none; /* Permite que los clics pasen a través del overlay */
    }

/* Ícono de zoom */
.modalim-zoom-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 50px; /* Tamaño del ícono */
    color: #fff;
    pointer-events: none;
}

    /* Ajuste para el ícono de Font Awesome */
    .modalim-zoom-icon i {
        font-size: 50px;
    }

/* Estilos para el modal */
.modalim-modal {
    display: none; /* Oculto por defecto */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 98%); /* Fondo negro semitransparente */
    overflow: hidden; /* Oculta el scroll */
}

/* Barra de herramientas */
.modalim-toolbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center; /* Centra los controles horizontalmente */
    z-index: 1001;
}

/* Botón de cierre */
.modalim-close {
    position: absolute;
    top: 8px;
    right: 29px;
    background-color: #002e6d;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Estilos para los controles de zoom */
.modalim-zoom-controls {
    display: flex;
    gap: 10px;
}

    .modalim-zoom-controls button {
        background-color: #002e6d; /* Color del botón */
        border: none; /* Sin bordes */
        color: #fff; /* Color del texto en blanco */
        font-size: 1.5rem; /* Tamaño de la fuente */
        padding: 8px 12px;
        cursor: pointer;
        border-radius: 5px;
    }

        .modalim-zoom-controls button:hover {
            background-color: #66a9de;
        }

/* Contenedor de la imagen dentro del modal */
.modalim-modal-content-container {
    width: 100%;
    height: calc(100% - 60px); /* Resta la altura de la barra de herramientas */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin-top: 60px; /* Evita que la imagen se superponga con la barra */
}

/* Imagen dentro del modal */
.modalim-modal-content {
    max-width: 100%;
    max-height: 100%;
    cursor: grab; /* Indica que se puede arrastrar */
    transition: transform 0.25s ease; /* Suaviza el zoom */
    border-radius: 8px;
}

    /* Cursor durante el arrastre */
    .modalim-modal-content:active {
        cursor: grabbing;
    }

/* Estilos responsivos */
@media (max-width: 600px) {
    /* En dispositivos móviles */
    .modalim-toolbar {
        justify-content: space-between; /* Distribuye espacio entre los elementos */
        padding: 0 10px;
    }

    .modalim-close {
        position: static;
        order: 2;
    }

    .modalim-zoom-controls {
        order: 1;
    }
}


/* Contenedor principal simula un fieldset */
.custom-fieldset {
    border: 2px solid #cccccc6e;
    border-radius: 10px;
    padding: 15px;
    position: relative;
    margin-bottom: 20px;
    padding-top: 30px; /* Espacio para que el título se superponga */
}

/* Encabezado simula el legend */
.custom-legend {
    position: absolute;
    top: -15px; /* Levanta el legend simulado sobre el borde */
    left: 20px;
    background-color: white;
    padding: 0 10px; /* Espacio alrededor del texto para superponer sobre la línea */
    display: flex;
    align-items: center;
    width: calc(100% - 40px); /* Asegura que el botón esté alineado a la derecha */
    z-index: 1;
}

/* Título del legend */
.legend-title {
    font-weight: bold;
    font-size: 16px;
    z-index: 1;
}

/* Línea entre el título y el botón */
.legend-line {
    flex-grow: 1;
    height: 1px;
    background-color: #ccc;
    margin: 0 10px; /* Espaciado entre el título y el botón */
}

/* Botón de edición */
.edit-button {
    background-color: #34A853;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

    /* Icono dentro del botón */
    .edit-button i {
        font-size: 1.2em;
    }

    /* Efecto hover en el botón */
    .edit-button:hover {
        background-color: #34A853;
    }

/* Contenido dentro del fieldset */
.fieldset-content {
    padding-top: 10px;
}

    /* Estilos para las etiquetas dentro del contenido */
    .fieldset-content div {
        display: flex;
        align-items: center;
        margin-bottom: 8px;
    }

        .fieldset-content div strong {
            margin-right: 5px;
        }

/* Icono de edición junto al teléfono */
.edit-icon {
    margin-left: 10px;
    color: #002e6d;
    text-decoration: none;
    cursor: pointer;
}

    .edit-icon i {
        font-size: 16px;
    }

    .edit-icon:hover {
        color: #002e6d90;
    }

/* Estilos responsivos */
@media (max-width: 600px) {
    .custom-legend {
        flex-wrap: wrap;
    }

    .legend-title {
        margin-bottom: 5px;
    }

    .edit-button {
        margin-top: 5px;
    }

    .fieldset-content div {
        flex-direction: column;
        align-items: flex-start;
    }

    .edit-icon {
        margin-left: 0;
        margin-top: 5px;
    }
}

.form-group-custom {
    padding: 7px;
    /* border: 1px solid #dcdcdc; */
    border-radius: 4px;
    /* display: inline-block; */
    width: 95%;
    /* margin-bottom: 10px; */
    /* margin-top: 20px; */
}

    .form-group-custom label {
        display: block;
        font-size: 14px;
        color: #999999;
        margin-bottom: 5px;
    }

.form-control-custom {
    width: 100%;
    padding: 8px;
    font-size: 16px;
    color: #333333;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    box-sizing: border-box;
}

.switch-containerBorde {
    padding: 0.5rem;
    background-color: #f5f5f5;
    border-radius: 8px;
    box-shadow: rgba(14, 63, 126, 0.06) 0px 0px 0px 1px, rgba(42, 51, 70, 0.03) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 2px 2px -1px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.03) 0px 5px 5px -2.5px, rgba(42, 51, 70, 0.03) 0px 10px 10px -5px, rgba(42, 51, 70, 0.03) 0px 24px 24px -8px;
}

.switch-containerTow {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.zoom-controls {
    display: flex;
    justify-content: flex-end;
}

.zoom-btn {
    background-color: #002e6d;
    color: white;
    border: none;
    padding: 5px 10px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
}

    .zoom-btn:hover {
        background-color: #346a8c;
    }


.FacRepor-container {
    border: 1px solid #919090;
    padding: 10px;
}

.btnfac {
    background-color: #e7650d !important;
}

.btnDEsc {
    background-color: #ffb71c !important;
}

.FacRepor-header {
    background-color: #002e6d;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
}

.FacRepor-logo {
    width: 100px;
}

.FacRepor-invoice-title {
    font-size: 36px;
    font-weight: bold;
}

.FacRepor-invoice-details {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}

    .FacRepor-invoice-details div {
        margin-bottom: 10px;
    }

    .FacRepor-invoice-details p {
        margin: 0;
        font-size: 14px;
    }

.FacRepor-invoice-number {
    font-size: 14px;
    background-color: #002e6d;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    display: inline-block;
}

.FacRepor-table-container {
    margin-top: 20px;
}

.FacRepor-summary {
    margin-top: 20px;
    justify-content: space-between;
    display: grid;
    grid-template-columns: 70% 30%; /* Primera columna al 70%, segunda al 30% */
}



.FacRepor-footer {
    margin-top: 30px;
    text-align: center;
    font-size: 12px;
    color: #777;
}

    .FacRepor-footer a {
        color: #00385c;
        text-decoration: none;
    }

/* Botones flotantes */
.FacRepor-floating-buttons {
    position: fixed;
    top: 50%;
    right: 0px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.FacRepor-button {
    background-color: #00385c;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

    .FacRepor-button:hover {
        background-color: #002d4a;
    }

.FacItruck-totals-headertow {
    background-color: #002e6d; /* Color de fondo */
    color: white; /* Color del texto */
    font-size: 18px;
    padding: 10px;
    text-align: center;
}

.FacItruck-total-row td {
    font-weight: bold;
    padding-top: 10px;
    border-top: 2px solid #e5e7eb;
}

.invoice-container {
    max-width: 800px;
    margin: auto;
    padding: 20px;
    background-color: #f9f9f9;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    font-family: 'Arial', sans-serif;
    color: #333;
}

.invoice-header {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.invoice-company {
    text-align: left;
}

    .invoice-company h2 {
        font-size: 24px;
        margin: 0;
    }

.invoice-info p {
    margin: 5px 0;
}

.invoice-client {
    padding: 10px 0;
    background-color: #fff;
    border: 1px solid #ddd;
    margin-bottom: 20px;
    padding: 20px;
}

    .invoice-client h3 {
        margin: 0;
        font-size: 18px;
    }

.invoice-items table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.invoice-items th, .invoice-items td {
    padding: 12px;
    border: 1px solid #ddd;
    text-align: left;
}

.invoice-items th {
    background-color: #f2f2f2;
}

.invoice-summary {
    text-align: right;
    margin-bottom: 20px;
}

    .invoice-summary p {
        margin: 5px 0;
        font-size: 16px;
    }

.invoice-footer {
    text-align: center;
    font-size: 12px;
    color: #666;
    padding-top: 20px;
    border-top: 1px solid #ddd;
}

.invoice-status {
    padding: 5px 10px;
    border-radius: 5px;
}

    .invoice-status.paid {
        background-color: #4CAF50;
        color: white;
    }

    .invoice-status.pending {
        background-color: #FFC107;
        color: white;
    }

    .invoice-status.cancelled {
        background-color: #F44336;
        color: white;
    }

.TituloCompnay {
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
    margin: 0 15px;
    display: inline-flex;
    align-items: center;
}

.beta-badge {
    top: 16%;
    left: 13%;
    background-color: #ff00009c;
    color: #fff;
    font-size: 1em;
    /* width: 40%; */
    font-weight: bold;
    padding: 5px 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    /* border-radius: 3px; */
    /* transform: rotate(45deg); */
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}


.EfficContainer {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.EfficFolder, .EfficFile {
    width: 100px;
    height: 140px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-align: center;
    position: relative;
}

    .EfficFolder:hover, .EfficFile:hover {
        background-color: #e0e0e0;
    }

.EfficFolderIcon, .EfficFileIcon {
    font-size: 40px;
    margin-bottom: 10px;
    color: #007bff;
    cursor: pointer;
}

.EfficFolderName, .EfficFileName {
    border-top: 1px solid #ddd;
    font-size: 1em;
    color: #000000;
    /* background-color: #002e6d; */
    /* border-radius: 12px; */
    padding: 5px 10px;
    /* display: inline-block; */
    font-weight: 500;
    font-family: Arial, sans-serif;
}

.DOC-button-delete {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 30px;
    height: 30px;
    background-color: red;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .DOC-button-delete:hover {
        background-color: darkred;
    }

.EfficBackButton {
    margin-bottom: 20px;
    background-color: #34A853;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: block;
}

    .EfficBackButton:hover {
        background-color: #34A853;
    }

.modal-reporte-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    visibility: hidden; /* Ocultar por defecto */
    opacity: 0; /* Transición suave */
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

    .modal-reporte-overlay.show {
        visibility: visible; /* Mostrar cuando la clase "show" esté presente */
        opacity: 1;
    }

    .modal-reporte-overlay.hide {
        visibility: hidden; /* Ocultar cuando la clase "hide" esté presente */
        opacity: 0;
    }

.modal-reporte {
    background-color: white;
    width: 400px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 20px;
    position: relative;
}

.modal-reporte-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 20px;
}

.modal-close-button {
    background: none;
    border: none;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    color: #333;
}

    .modal-close-button:hover {
        color: red;
    }

.modal-reporte-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}




.rz-panel-menu .rz-navigation-item-active .rz-navigation-item-icon, .rz-panel-menu .rz-navigation-item-wrapper-active .rz-navigation-item-icon {
    color: #002e6d !important;
}

.rz-panel-menu .rz-navigation-item-active, .rz-panel-menu .rz-navigation-item-wrapper-active {
    background-color: #002e6d29;
}

.cardaling {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.modal-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    padding: 15px;
}

.modal-form-gridTwi {
    display: grid; 
    gap: 15px;
    padding: 15px;
}

.full-widthTwo {
    grid-column: span 2;
}

.modal-footerTw {
    text-align: center;
    margin-top: 15px;
    margin-bottom: 10px;
}

/* Contenedor principal del modal */
.ModalTarifa-content {
    background-color: white;
    width: 85%;
    height: 70vh;
    padding: 0;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    border-bottom: 4px solid #002e6d;
}

/* Encabezado del modal */
.ModalTarifa-header {
    background-color: #002e6d;
    padding: 0px 12px;
    color: white;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
}

/* Cuerpo dividido en dos columnas */
.ModalTarifa-body {
    display: flex;
    flex-grow: 1;
    overflow-y: auto;
    padding: 20px;
    gap: 20px;
}

/* Contenedor de cada columna */
.ModalTarifa-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

    /* Encabezados de cada sección */
    .ModalTarifa-column h3 {
        margin-bottom: 10px;
        font-size: 1.1rem;
        font-weight: bold;
    }

/* Contenedor con scroll interno */
.ModalTarifa-scroll {
    flex-grow: 1;
    overflow-y: auto;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    background-color: #f9f9f9;
}

/* Footer con el botón "Guardar" fijo */
.ModalTarifa-footer {
    background-color: white;
    padding: 12px;
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid #ddd;
    position: sticky;
    bottom: 0; 
}

/* Estilos de los botones de eliminar */
.delete-button {
    background-color: red;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    font-weight: bold;
}

.ModalTarifa-close {
    background: none;
    border: none;
    font-size: 34px;
    cursor: pointer;
    color: white;
    font-weight: 700;
}
    .ModalTarifa-close:hover {
        color: #ffffff88; /* Color de hover para el botón de cierre */
    }



/* Para todos los RadzenTextBox cuando tienen focus */
.rz-textbox:focus {
    border: 2px solid #002e6d !important; /* Cambia el color al que desees */
    box-shadow: 0 0 5px rgb(40, 167, 69) !important;
}
.rz-state-focused .rz-text-field-label {
    color: #002e6d !important;
}


/* Cambiar el color del label cuando el input está en focus */
.rz-form-field.rz-state-focused label {
    color: #002e6d !important;
}

/* También aplica si hay algún otro estilo que lo afecte */
.rz-state-focused .rz-text-field-label {
    color: #002e6d !important;
}
.rz-dropdown.rz-state-focused label {
    color: #002e6d !important;
}

/* Si el label está dentro de un .rz-form-field */
.rz-form-field.rz-state-focused .rz-dropdown-label {
    color: #002e6d !important;
}

/* Para asegurar que el borde del dropdown también se vea bien */
.rz-dropdown:focus-within {
    border: 2px solid #002e6d !important;
    box-shadow: 0 0 5px rgb(40, 167, 69) !important;
}


:root {
    --rz-primary: #002e6d !important; 
}

.rz-chkbox-box.rz-state-active.rz-disabled {
    background-color: #2fb58a;
}




.rz-switch .rz-switch-circle:before {
    background: #756969 !important
}
 

    .rz-switch.rz-switch-checked .rz-switch-circle:before {
        background: #4CAF50 !important;
        border: 2px solid #002e6d !important;
        transform: translateX(2rem);
    }

.subcard-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  
}

.subcard-text {
    flex-grow: 1;
    text-align: center;
    position: relative;
    font-weight: bold;
    font-size: 1.1rem;
    color: #333;
}

    .subcard-text::before,
    .subcard-text::after {
        content: "";
        position: absolute;
        top: 50%;
        width: 40%;
        height: 1px;
        background-color: #aaa;
    }

    .subcard-text::before {
        left: 0;
        transform: translateY(-50%);
    }

    .subcard-text::after {
        right: 0;
        transform: translateY(-50%);
    }

.subcard-buttons {
    display: flex;
    gap: 10px;
}

    .subcard-buttons button {
        padding: 8px 12px;
        border: none;
        background-color: #007bff;
        color: white;
        border-radius: 5px;
        cursor: pointer;
        transition: 0.3s;
    }

        .subcard-buttons button:hover {
            background-color: #0056b3;
        }

.rz-chkbox-box.rz-state-active:hover:not(.rz-state-disabled) {
    background-color: #002e6d !important;
    border: #002e6d !important;
}

.ModalPack-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Fondo ligeramente oscuro */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 998;
}

@media (max-width: 768px) {
    /* Contenido del modal */
    .ModalPack-content {
        width: 100% !important;
    }
}

/* Contenido del modal */
.ModalPack-content {
    background-color: white;
    width: 70%; /* Ajustado para un tamaño más pequeño */
   
    padding: 0; /* Sin relleno para manejar los elementos internos */
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* Para manejar el borde redondeado en el header */
    position: relative;
    border-bottom: 4px solid #002e6d;
}

/* Encabezado del modal con fondo azul */
.ModalPack-header {
    background-color: #002e6d; /* Azul similar al de la imagen */
    padding: 0px 12px;
    color: white; /* Texto blanco */
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: grab;
}

    .ModalPack-header h2 {
        margin: 0;
    }

.ModalPack-close {
    background: none;
    border: none;
    font-size: 34px;
    cursor: pointer;
    color: white;
    font-weight: 700;
}

/* Cuerpo del modal */
.ModalPack-body {
    padding: 20px; /* Espacio interno */
}

    .ModalPack-body form {
        display: flex;
        flex-direction: column;
        gap: 20px; /* Espacio entre los campos */
    }

.ModalPack-close:hover {
    color: #ffffff88; /* Color de hover para el botón de cierre */
}
.stepper-modern {
    display: flex;
    gap: 24px;
    margin-bottom: 32px;
    align-items: flex-start;
}

.step-modern {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    color: #888;
}

    .step-modern .circle {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background-color: #ccc;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        margin-bottom: 6px;
        transition: 0.3s;
    }

    .step-modern.active .circle {
        background-color: #FFD700;
        color: #000;
        font-weight: bold;
    }

    .step-modern.completed .circle {
        background-color: #4CAF50;
    }

    .step-modern.active,
    .step-modern.completed {
        color: #333;
    }
.rz-steps .rz-steps-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: rgba(0,0,0,0.1);
    color: white;
    border-radius: 30px;
    padding: 4px 16px;
    margin-bottom: 12px;
}
.rz-steps .rz-state-highlight .rz-steps-number {
    background: #002e6d;
    color: var(--rz-steps-number-selected-color);
}
.rz-steps-item-icon {
    width: 36px;
    height: 36px;
    background-color: transparent;
    border: none;
    font-size: 22px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}

.rz-steps-item-text {
    font-size: 18px;
    font-weight: 500;
}

.rz-steps-item.rz-state-active {
    background-color: #FFD700 !important;
    color: black !important;
}
.rz-steps .rz-state-highlight .rz-steps-title {
    color: #000000 !important;
}

.custom-stepper {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: stretch;
    justify-content: center;
}

.custom-step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 15px;
    background: #eee;
    padding: 4px 12px;
    border-radius: 5px;
    color: #555;
}

    .custom-step .circle2 {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-color: #aaa;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        font-weight: bold;
    }

    .custom-step.active {
        background-color: #002e6d;
        color: #ffffff;
    }

        .custom-step.active .circle2 {
            background-color: #ff3b00;
            color: white;
        }

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.add-item-container {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.5rem;
    gap: 0.5rem;
}

.add-item-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.badge-estado {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    gap: 6px;
    color: white;
}

.estado-planificado {
    background-color: #007bff; /* Azul */
}

.estado-en-curso {
    background-color: #ffc107; /* Amarillo */
    color: black;
}

.estado-finalizado {
    background-color: #28a745; /* Verde */
}

.estado-cancelado {
    background-color: #dc3545; /* Rojo */
}
.rental-summary-card {
    background: #f9f9f9;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.1);
}

.summary-header h4 {
    margin: 0;
    font-weight: 600;
}

.summary-header h6 {
    margin-top: 5px;
    color: gray;
}

.summary-body {
    /* margin-top: 15px; */
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-wrap: nowrap;
    align-content: space-between;
    justify-content: center;
    align-items: center;
}

.summary-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
}

.form-grid-entrega {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

    .form-grid-entrega .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

.section-title-with-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    font-size: 1em;
    margin-bottom: 10px;
}

/* ======================================================
   RentalCard.css – Estilo limpio, moderno y sin :root
   ====================================================== */

.RentalCard {
    background-color: #ffffff;
    border-radius: 16px;
    /* padding: 2rem; */
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
    font-family: "Segoe UI", "Inter", sans-serif;
    /* color: #212529; */
    /* max-width: 900px; */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    /* gap: 2rem; */
}

.RentalHeader {
    text-align: center;
    padding-bottom: 10px;
}

    .RentalHeader h4 {
        margin: 0;
        font-size: 1.75rem;
        font-weight: 600;
    }

    .RentalHeader h6 {
        margin: 0.25rem 0 0;
        font-size: 1rem;
        color: #6c757d;
        font-weight: 400;
    }

.RentalGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    font-size: 0.95rem;
}

.RentalItem {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

    .RentalItem label {
        font-weight: 600;
        color: #495057;
        font-size: 0.85rem;
    }

    .RentalItem .RentalValue {
        font-weight: 500;
        color: #212529;
    }

.RentalBadge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
 
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

.RentalEstado-Planificado {
    background-color: #0d6efd;
    color: #ffffff;
}

.RentalEstado-EnCurso {
    background-color: #ffc107;
    color: #212529;
}

.RentalEstado-Finalizado {
    background-color: #28a745;
    color: #ffffff;
}

.RentalEstado-Cancelado {
    background-color: #dc3545;
    color: #ffffff;
}

.RentalNotes {
    border-top: 1px solid #e5e7eb;
    padding-top: 1rem;
    font-size: 0.9rem;
    color: #495057;
}

@media (max-width: 576px) {
    .RentalCard {
        padding: 1.25rem;
    }

    .RentalGrid {
        grid-template-columns: 1fr;
    }
}

.FinalizeButtonContainer {
    padding: 1.25rem 1.5rem 1.5rem;
    border-top: 1px solid #eee;
    margin-top: 1.25rem;
}
 
.invo-container {
    width: 750px;
    padding: 40px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 13px;
    color: #333;
    background: #fff; 
}

.invo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

    .invo-header img {
        height: 60px;
    }

.invo-header-info {
    text-align: right;
}

    .invo-header-info h2 {
        margin: 0;
        font-size: 20px;
        color: #002e6d;
    }

.invo-section {
    margin-bottom: 20px;
}

    .invo-section div {
        margin-bottom: 4px;
    }

.invo-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

    .invo-table th {
        background-color: #002e6d;
        color: white;
        padding: 10px;
        border: 1px solid #ccc;
        text-align: left;
    }

    .invo-table td {
        padding: 8px;
        border: 1px solid #ccc;
    }

.invo-totals {
    text-align: right;
    margin-top: 30px;
}

    .invo-totals p {
        margin: 5px 0;
    }

    .invo-totals h3 {
        margin-top: 10px;
        color: #002e6d;
    }


.invo-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 20px;
    margin-top: 20px;
}

.invo-summary-grid p {
    margin: 5px 0;
    font-size: 13px;
}

.invo-summary-grid .invo-right {
    text-align: right;
}
    .invo-summary-grid .invo-left {
        text-align: left;
    }
@media (max-width: 768px) {
    .invo-summary-grid {
        grid-template-columns: 1fr;
    }

        .invo-summary-grid .invo-right {
            text-align: left;
        }
}



.mt-2 {
    margin-top: 0.5rem !important;
}

.text-end {
    text-align: right !important;
}